vue-awesome-swiper 使用lazy懒加载无效!
使用 vue-awesome-swiper 最新版 4.1.1
swiper正常加载,滚动没有任何问题!
主要问题:启用lazy方法完全无效,也没有任何报错信息!!
html代码:
<swiper :auto-update="true" :options="swiperOption" >
<swiper-slide class="channel" v-for="(vo,key) in list" :key="key">
<img :data-src="vo.vod_pic" class="swiper-lazy" :data-srcset="vo.vod_pic" >
</swiper-slide>
</swiper>
data:
swiperOption: {
watchSlidesVisibility : true,
observer:true,
slidesPerView : 'auto',
preloadImages: false,//关闭预加载
centeredSlidesBounds: true,//则活动幻灯片将居中
loadPrevNext: true,
lazyLoading : true,
lazyLoadingInPrevNext: true, // 设置为true允许将延迟加载应用到最接近的slide的图片(前一个和后一个slide)。
lazy: {loadPrevNext: true},
navigation: {
nextEl: '.button-next',
prevEl: '.button-prev'
},
}
纠结了 一整天 vue-awesome-swiper真的让人吐血......
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
已经确认了
4.1.1
有问题,不推荐使用,解决方法请参考:http://www.datll.com/ask/arti...
最新的文档我觉得没有更新,我最新用下载,按照
npm
上的README
文档,swiper版本6.0.0
,vue-awesome-swiper版本4.1.1
,swiper css
目录不是文档上的,看了代码,是要用import 'swiper/swiper-bundle.css';
,但是轮播初始化用不会自动轮播,没有分页器。最新的你的没有这些问题么?最后还是降版本才勉勉强强用起来。这个懒加载生效是怎么判断生效了呢