vue，swipervue轮播组件图无法显示，报错：Uncaught TypeError: Cannot set property '$Lazyload' of undefined

来源：蜘蛛抓取(WebSpider) 时间：2021-01-25 17:40 标签： vue图片轮播

一般是上面的版本问题再就是配置的问题


2.在相应的文件中导入

一般是导入的时候字母大小写的问题，有时候要大写有时候要小写。

在使用Swiper组件的时候有时候会出现vue輪播组件图自动播放过程中出现白页，有几页vue轮播组件图就会出现几页白页在一段不短的时间后突然闪一下变成了正常vue轮播组件图内容，就此循环

在创建Swiper的时候，将Swiper创建的函数放入setTimeout方法中延迟一秒创建，就可以解决

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

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

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

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

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

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

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

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

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

// 如果自行设计了插件那么插件嘚一些配置相关参数，也应该出现在这个对象中如下debugger

我要回帖

更多关于 vue图片轮播 的文章

 

随机推荐