微信小程序swiper组件卡死来回疯狂轮播

change事件返回detail中包含一个source字段,表示导致变更的原因,可能值如下:

1.autoplay 自动播放导致swiper变化;

2.touch 用户划动引起swiper变化;

3. 其他原因将用空字符串表示

<view class="banner mgb24">
      <swiper interval="{{interval}}" duration="{{duration}}" autoplay="{{autoplay}}" circular vertical="{{vertical}}" current="{{current}}" bindchange="swiperChange">
        <swiper-item wx:for="{{banner}}" wx:key="ban" bindtap="navigato" data-url="{{item.url}}">
          <image src="{{item.image}}" mode="aspectFit"></image>
        </swiper-item>
      </swiper>
      <view class="dot">
        <block wx:for="{{banner}}" wx:key="ff">
          <view class='dottt {{index==swiperCurrent?"active":""}}'></view>
        </block>
      </view>
 </view>
.banner{
  position: relative;
  width: 100%;
  height: 290rpx;
}
.banner swiper{
  width:100%;
  height:250rpx;
  border-radius:10rpx;
}
.banner .dot{
  display:flex;
  justify-content:center;
  width:100%;
  position:absolute;
  bottom:16rpx;
}
.dottt{
  width:20rpx;
  height:8rpx;
  border-radius:5rpx;
  background:#eee;
  margin:0 6rpx;
}
.active{
  background: #59C069!important;
}

以下是我的解决方法:

   data:{
    swiperCurrent:0,
    current:0,
    circular:true,
    vertical:false,
    autoplay: true,
    interval: 3000,
    duration: 1500,
    dots:true,
    }
// 轮播图
  swiperChange(e){
    //普通
    // this.setData({
    //   swiperCurrent: e.detail.current
    // })
 
      //防止swiper控件卡死
      if (this.data.current == 0 && this.data.swiperCurrent>1 ) {//卡死时,重置current为正确索引
        this.setData({ current: this.data.swiperCurrent });
      }
      else {//正常轮转时,记录正确页码索引
        this.setData({ swiperCurrent: e.detail.current });
      }

  },    

 

posted @ 2020-03-14 10:51  怂的一批的蜗牛  阅读(1800)  评论(0编辑  收藏  举报