swiper.js在隐藏/显示切换时,轮播出现bug的解决办法

文章2019-06-0546 人已阅来源:网络

swiper在 swiper-container正常状态下显示,轮播是没有问题,但是当 swiper-container由隐藏切换至显示时(比如做图片查看时)会出现滑动bug,滑动卡顿而且最后一张可以移出可视区域。

出现问题的原因是分页器没有更新,所以要监控分页器的状态,官方提供一个属性 observe(observeParents)默认值false,修改为true即可,在切换container显示隐藏时便会回归正常。

这个问题官网提供了解决的方法,只需要设置两个参数就行,代码如下:

var mySwiper = myApp.swiper('.guest-wrapper',{
    freeMode : true,
    slidesPerView : 'auto',
    observer: true,//修改swiper自己或子元素时,自动初始化swiper
    observeParents: true//修改swiper的父元素时,自动初始化swiper
});