项目中用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})
}
}
}
参考了愤怒的小鸟:https://blog.csdn.net/oagnuygnef/article/details/80506442