• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

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

138 0

在使用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
  • 本文分类:nuxt
  • 本文标签:amfe-flexiblenuxtrem适配样式闪烁
  • 流行热度:已超过 138 人围观了本文
  • 最后更新:2021年04月29日 - 16时07分54秒
  • 发布日期:2021年04月29日 - 16时07分54秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码