微信小程序swiper组件滑动卡死现象解决

项目中用swiper作为滑动展示展品页面,swiper-item高达49个

在使用过程中出现了滑动卡死的现象,解决方案如下

在swiper里面监听bindanimationfinish事件

bindanimationfinish在swiper卡死的时候也会触发(神奇)

function:

changeGoodsSwip: function (detail) {
    if (detail.detail.source == "touch") {
        //当页面卡死的时候,current的值会变成0 
        if(detail.detail.current == 0){
            //有时候这算是正常情况,所以暂定连续出现3次就是卡了
            let swiperError = this.data.swiperError
            swiperError += 1
            this.setData({swiperError: swiperError })
            if (swiperError >= 3) { //在开关被触发3次以上
                console.error(this.data.swiperError)
                this.setData({ goodsIndex: this.data.preIndex });//,重置current为正确索引
                this.setData({swiperError: 0})
            }
        }else {//正常轮播时,记录正确页码索引
            this.setData({ preIndex: detail.detail.current });
            //将开关重置为0
            this.setData({swiperError: 0})
        }
    }
}

参考了愤怒的小鸟:https://blog.csdn.net/oagnuygnef/article/details/80506442

你可能感兴趣的:(微信小程序swiper组件滑动卡死现象解决)