lazyload.js和swiper.js冲突问题?

版本
Swiper 4.5.3
lazyload.js 1.9.3

Swiper轮播 是x轴滚动,不知道什么什么lazyload监听了x轴,而不是正常浏览Y轴滚动,导致图片已经进入视图了还不显示,必须要接近顶部了才触发,如下图:

QQ截图20200318012818.jpg

发现一个很关键的元凶 ,就是Swiper 的列表容器 .swiper-wrapper的css使用了 display:flex;导致lazyload监听了x轴。但是这个swiper-wrapper又必须是display:flex;,把这个注释掉lazyload正常加载,但是样式已经面目全非。
当你滑动Swiper到最后一张是他就触发第二行的lazyload,

`
.swiper-wrapper {

width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform,-webkit-transform;
-webkit-box-sizing: content-box;
box-sizing: content-box;

}

`

如何让lazyload不去监听swiper-wrapper横向滚动加载呢?

苦恼了一整天了,实在是想不到什么办法,求助大佬们帮帮忙!!

阅读 3k
2 个回答
  1. swiper 本身就支持 lazyload,似乎没有必要多用一个 lazyload 库
  2. swiper 最新版本是 5.3.6,请尽量用新版

在 display:flex; 后面再加一个样式试试:flex-direction: row

虽然 row 是默认值,但是有时候不加就是会出问题。

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