在vue中使用swiper组件的一点问题

最近公司项目中用到了swiper组件,项目用的vue搭建的,其实一开始是打算自己写的,但是考虑到项目工程其他地方已经引过swiper,为了不重复造轮子,打算用swiper来做;

需求场景很简单,大致就是这样一个页面结构

image

顶部通知栏轮播用的swiper,通过接口拉到的数据来上下滚动轮播

下方有一个手机号的表单提交

结果问题就出在这里

当我输手机号的时候,页面会特别卡,每输入一个数字都会很卡,数字进入input都会有延迟

后来用Chrome的调试工具找了很久,发现问题出在swiper上,

由于我的swiper组件和下面的内容使写在一个页面组件里的,每次我在input里输入一个字符时,都会触发一次swiper的重新计算,造成页面的回流,导致卡顿。

解决办法
后来我将swiper抽出来做一个单文件vue组件,这样,我再操作input的时候,swiper组件不会触发相应的更新了,页面正常了。

这个问题应该是在swiper和vue的数据渲染机制造成的,具体原因还需要自己再去琢磨,总而言之分享一下自己的一点心得。

你可能感兴趣的:(在vue中使用swiper组件的一点问题)