vue-awesome-swiper 使用lazy懒加载无效!
使用 vue-awesome-swiper 最新版 6.0.x
swiper正常加载,滚动没有任何问题!
主要问题:启用lazy方法完全无效,也没有任何报错信息!!
html代码:
<swiper :auto-update="true" :options="swiperOption" ><swiper-slide class="channel" v-for="(vo,key) in list" :key="key">
<img :data-src="https://segmentfault.com/q/1010000023154569/vo.vod_pic" class="swiper-lazy" :data-srcset="https://segmentfault.com/q/1010000023154569/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真的让人吐血......
回答
最新的文档我觉得没有更新,我最新用下载,按照npm
上的README
文档,swiper版本6.0.0
,vue-awesome-swiper版本4.1.1
,swiper css
目录不是文档上的,看了代码,是要用import 'swiper/swiper-bundle.css';
,但是轮播初始化用不会自动轮播,没有分页器。最新的你的没有这些问题么?最后还是降版本才勉勉强强用起来。
以上是 vue-awesome-swiper 使用lazy懒加载无效! 的全部内容, 来源链接: utcz.com/a/31203.html