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

//展示轮播图数据的swiper组件
<swiper class="swiper"
    //不要使用 bindchange="animationChange" 
    bindanimationfinish="animationChange" 
    autoplay="{{autoplay}}" 
    current="{{activeSlide}}">
<block wx:key="{{index}}" wx:for="{{slides}}">
<swiper-item class="swiper-item">
<image src="{{item.bannerUrl}}" data-url='{{item.bannerSkipUrl}}' class="{{index==activeSlide?'mid swiper-active':'mid swiper-image'}} slide-image" @tap='goLink' />
</swiper-item>
</block>
</swiper>

{
  data:{
    activeSlide:0,
    autoplay:true
  }
  method:{
    animationChange(e) {
      this.activeSlide = e.detail.current;
    },
  }
}

防止出现轮播图卡死现象，最好使用 bindanimationfinish 方法切换当前下标的图片

bindchange
EventHandle current 改变时会触发 change 事件，event.detail = {current: current, source: source}

bindanimationfinish
EventHandle 动画结束时会触发 animationfinish 事件，event.detail 同上

如果你添加autoplay自动播放会导致swiper变化，在手机上你可以测试一下，打开你做的小程序有轮播图的界面 然后切屏打开其他应用你会看到轮播图在疯狂的卡死。

因为autoplay与bindchange事件一起导致当前的current出现问题，所以采用动画结束时会触发 animationfinish 事件给current去赋值。

从 1.4.0 开始，change事件返回detail中包含一个source字段，表示导致变更的原因，可能值如下：

autoplay 自动播放导致swiper变化；
touch 用户划动引起swiper变化；
其他原因将用空字符串表示。

注意：其中只可放置<swiper-item/>组件，否则会导致未定义的行为。