微信小程序swiper輪播圖卡死來回瘋狂輪播

<swiper class="swiper"  bindanimationfinish="animationChange" indicator-dots="true" indicator-color="{{indicatorColor}}" indicator-active-color='{{indicatorActiveColor}}' autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" 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>
複製代碼

以上是展現輪播圖數據的swiper組件
下面是介紹切換圖片的方法

// 防止出現輪播圖卡死現象最好使用bindanimationfinish方法切換當前下標的圖片
animationChange(e) {
    this.activeSlide = e.detail.current;
  },
複製代碼

bindchange方法current 改變時會觸發 change 事件，event.detail = {current: current, source: source}

若是你添加autoplay自動播放會致使swiper變化，在手機上你能夠測試一下，打開你作的小程序有輪播圖的界面 而後切屏打開其餘應用你會看到輪播圖在瘋狂的卡死。就是由於autoplay與bindchange事件一塊兒致使當前的current出現問題，因此採用動畫結束時會觸發 animationfinish 事件給current去賦值。

swiper

滑塊視圖容器。

屬性名	類型	默認值	說明	最低版本
indicator-dots	Boolean	false	是否顯示面板指示點
indicator-color	Color	rgba(0, 0, 0, .3)	指示點顏色	1.1.0
indicator-active-color	Color	#000000	當前選中的指示點顏色	1.1.0
autoplay	Boolean	false	是否自動切換
current	Number	0	當前所在滑塊的 index
current-item-id	String	""	當前所在滑塊的 item-id ，不能與 current 被同時指定	1.9.0
interval	Number	5000	自動切換時間間隔
duration	Number	500	滑動動畫時長
circular	Boolean	false	是否採用銜接滑動
vertical	Boolean	false	滑動方向是否爲縱向
previous-margin	String	"0px"	前邊距，可用於露出前一項的一小部分，接受 px 和 rpx 值	1.9.0
next-margin	String	"0px"	後邊距，可用於露出後一項的一小部分，接受 px 和 rpx 值	1.9.0
display-multiple-items	Number	1	同時顯示的滑塊數量	1.9.0
skip-hidden-item-layout	Boolean	false	是否跳過未顯示的滑塊佈局，設爲 true 可優化複雜狀況下的滑動性能，但會丟失隱藏狀態滑塊的佈局信息	1.9.0
bindchange	EventHandle		current 改變時會觸發 change 事件，event.detail = {current: current, source: source}
bindtransition	EventHandle		swiper-item 的位置發生改變時會觸發 transition 事件，event.detail = {dx: dx, dy: dy}	2.4.3
bindanimationfinish	EventHandle		動畫結束時會觸發 animationfinish 事件，event.detail 同上	1.9.0

從 1.4.0 開始，change事件返回detail中包含一個source字段，表示致使變動的緣由，可能值以下：

• autoplay 自動播放致使swiper變化；
• touch 用戶划動引發swiper變化；
• 其餘緣由將用空字符串表示。

注意：其中只可放置<swiper-item/>組件，不然會致使未定義的行爲。