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.0vue-awesome-swiper版本4.1.1swiper css目录不是文档上的,看了代码,是要用import 'swiper/swiper-bundle.css';,但是轮播初始化用不会自动轮播,没有分页器。最新的你的没有这些问题么?最后还是降版本才勉勉强强用起来。

以上是 vue-awesome-swiper 使用lazy懒加载无效! 的全部内容, 来源链接: utcz.com/a/31203.html

回到顶部