最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【记录】尝试antd-mobile中的ActivityIndicator和Toast

ReactJS crifan 4285浏览 0评论

折腾:

【记录】去试用Ant Design的UI

期间,见到过demo

Ant Design Mobile – 移动端设计规范

中的:

觉得不错。

去试试。

ActivityIndicator – Ant Design

Toast – Ant Design

用代码:

import { ActivityIndicator } from ‘antd-mobile’;
        <ActivityIndicator
          toast
          text=”正在加载…”
          size=”small”
          animating={true}

然后效果不错,但是就是太大了,且size=”small”还是size=“large”,都没有区别,都是太大:

所以,也不合适直接使用, 需要小一点才可以,才好看。

然后突然发现:

此处的所有的引用的东西,包括之前的Button和此处的ActivityIndicator,都是两倍尺寸的感觉

-》难道是之前的rem计算有问题?

去参考:

Ant Design Mobile of React – Ant Design

继续去折腾看看。

虽然可以尝试去添加:

<script src=”path/to/antm-viewport.min.js”></script>

然后去:

【已解决】如何把postcss-pxtorem的配置添加到webpack.config.babel.js中

后来才注意到:

src/index.ejs

中的:

<script src=”path/to/antm-viewport.min.js”></script>

是没用的。。

需要先去下载:

https://gw.alipayobjects.com/os/rmsportal/uDTmsEBmTUVrpmCBozbm.js

保存为:

antm-viewport.min.js

放到项目里:

在上述期间,看到了:

please fix official doc about using create-react-app · Issue #1413 · ant-design/ant-design-mobile

“babel”: {
    “presets”: [
      “react-app”,
    ],
    “plugins”: [
      [
        “import”,
        [
          {
            “libraryName”: “antd-mobile”,
            “style”: true
          }
        ]
      ]
    ]
  },

而此处之前官网的配置是:

“style”: “css”

不知道是否有影响。

去换成:

“style”: true

试试。

好像没区别。

结果问题依旧:

还是很大:

还是没有等到官网的示例的,正常大小:

算了,放弃。不弄了。

后来,在确保:

antm-viewport.min.js

正常加载后:

  <script src=”/antm-viewport.min.js”></script>

然后就看到了效果:

果然是rem是100px

和我之前项目中的rem是200px,冲突了,导致app变小成一半了:

然后此时,的确是正在加载的提示,变成正常的大小了:

但是导致app完全没法正常使用了。

所以,还是不行。

去rem值改为200看看效果:

                  pxtorem({
                    rootValue: 200,
                    propWhiteList: [] // Enables converting of all properties – default is just font sizes.
                  });

效果依旧

-》看来是:

antm-viewport.min.js去决定的rem的值的。

去(

从:

https://github.com/ant-design/ant-design-mobile/wiki/Antd-Mobile-viewport-setting-wiki

找到源码:

https://gw.alipayobjects.com/os/rmsportal/dVgyohpfmDMFFeDasFns.js

而搞懂具体的代码含义后,再去)

从100:

改为200:

好像是改为200没有生效,去看了看html源码,感觉是:

<script src=”/antm-viewport.min.js”></script>

是被放在了此处的:

<link rel=”preload” href=”/uapp/bundle_b413573c50d60c37f2fd.js” as=”script”>

之后了?

看看这样改,是否可以:

结果是可以的,app的大小正常了:

但是很明显,此处还是导致了:加载提示框和文字,都还是之前的很大的效果了。

【总结】

此处,虽然可以使用antd-mobile中的ActivityIndicator,但是显示效果却很大,和app大小不匹配,不好看,不能接受。

基本确定了是和rem的设置有关:

antd-mobile中是默认使用了rem为100px。

而此处经过设置了rem为200

(antm-viewport.min.js中flex(200, 1);

webpack.config.babel.js中pxtorem的rootValue: 200)

结果都还是无效。所以就放弃使用了。

转载请注明:在路上 » 【记录】尝试antd-mobile中的ActivityIndicator和Toast

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
89 queries in 0.190 seconds, using 22.11MB memory