Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
725 views
in Technique[技术] by (71.8m points)

vue-awesome-swiper 使用lazy懒加载无效!

使用 vue-awesome-swiper 最新版 4.1.1

swiper正常加载,滚动没有任何问题!

主要问题:启用lazy方法完全无效,也没有任何报错信息!!
image.png

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真的让人吐血......


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

已经确认了 4.1.1有问题,不推荐使用,
解决方法请参考:http://www.datll.com/ask/arti...


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...