微信小程式swiper元件滑動卡死現象解決
阿新 • • 發佈:2019-01-29
專案中用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}) } } }