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

发布于 2022-09-12 03:37:35 字数 1034 浏览 56 评论 0

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

最美的太阳 2022-09-19 03:37:35

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

压抑⊿情绪 2022-09-19 03:37:35

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

鱼窥荷 2022-09-19 03:37:35

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文