1. 程式人生 > >微信小程式swiper元件滑動卡死現象解決

微信小程式swiper元件滑動卡死現象解決

專案中用swiper作為滑動展示展品頁面,swiper-item高達49個

在使用過程中出現了滑動卡死的現象,解決方案如下

在swiper裡面監聽bindanimationfinish事件

bindanimationfinish在swiper卡死的時候也會觸發(神奇)

<swiper bindanimationfinish="changeGoodsSwip" current="{{goodsIndex}}">

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})
        }
    }
}