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

阅读 7.8k
3 个回答

最新的文档我觉得没有更新,我最新用下载,按照npm上的README文档,swiper版本6.0.0vue-awesome-swiper版本4.1.1swiper css目录不是文档上的,看了代码,是要用import 'swiper/swiper-bundle.css';,但是轮播初始化用不会自动轮播,没有分页器。最新的你的没有这些问题么?最后还是降版本才勉勉强强用起来。

这个懒加载生效是怎么判断生效了呢

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏