木灵鱼儿

木灵鱼儿

阅读:874

最后更新:2021/04/29/ 16:07:54

解决nuxt使用rem适配样式第一次加载闪烁的问题 amfe-flexible

在使用vant框架的时候,一般都是使用rem自动适配,这个东西有好有坏,具体就不细说,我们这次处理的问题就是使用了rem适配,他样式第一次加载闪烁的问题。

其实出现这个问题,大多数都是使用了plugins插件的方式加载rem适配。

具体如下:

  1. 在plugins目录下创建了lib-flexible.js文件,文件名随意
  2. 打开文件,在里面写入import 'amfe-flexible'
  3. 打开nuxt.config.js,在plugins中加入代码{ src: '@/plugins/lib-flexible', mode: 'client' },//rem适配

这样的确可以使用,但是却产生了首次加载样式会闪烁一次的问题。

为什么

其实很简单,虽然我们的css样式px单位在打包后会自动转成rem单位,但是我们的body元素并没有被设置font-size大小,这个设置需要amfe-flexiblejs插件来完成。

但是再nuxt中,在plugins中使用的插件,并不能保证js插件一定是在加载html内容前加载的,这就导致,html内容加载完了,都渲染好了,js文件才加载完毕,然后设置body的font-size,然后rem单位的效果,元素的大小发生变化。

导致样式发生闪烁。

解决办法

我们需要提取出amfe-flexible插件的js文件。

找到node_modules目录下的amfe-flexible目录,里面有两个js文件:

  1. index.js
  2. index.min.js

由于我们不需要改动内容,所以我将index.min.js复制到nuxt的static/js目录下

然后改个名字方便辨认,比如:flexible.min.js

然后找到nuxt.config.js文件,先去除之前的plugins加入的rem适配代码,然后head属性中手动导入flexible.min.js

export default {
  head: {
    script:[
      { src: "/js/flexible.min.js" },
    ]
  }
}

此时我们再刷新,可以发现,样式不会闪烁了。

问题解决。奈斯!!!

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 874

相关文章