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

陌々發表於2019-01-11
微信小程式
<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/>元件，否則會導致未定義的行為。

相關文章