『小程式開發』關於微信小程式內建元件swiper，circular（銜接）使用小技巧（實戰）

依舊優雅發表於2019-03-04
微信小程式元件

前言：

swiper，關於滑塊的一些效果無縫，斷點，視差等等...我想這裡就不用做太多的贅述，這裡給大家分享一下實戰專案中使用circular（銜接）的一點小特性、小技巧，當然你也可以理解為遇到了一個小坑，因為不能把整個專案搬上來，所以這裡用一個小事例去簡單的描述一下。

功能介紹

swiper滑塊檢視容器（輪播效果）

可配置項

這裡只簡單列出示例中所需的一些屬性，如需瞭解更多【請點選，瞭解更多詳情】

    indicatorDots: true, //  是否顯示皮膚指示點
    autoplay: false, // 是否自動切換
    circular: true, // 是否採用銜接滑動
    current: 0, // 當前所在頁面的 index
    interval: 500, // 自動切換時間間隔
    duration: 500 // 滑動動畫時長
複製程式碼

示例

場景

類答題效果，答對本題自動跳轉下一題，並保持滑塊的銜接效果（這裡我們用按鈕來代替自動跳轉）

WXML：

   <page>
        <view class='wrap-swiper'>
          <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" current="{{current}}" bindchange='testDetails' indicator-active-color='#fff'>
            <block wx:for="{{imgUrls}}" wx:key="key">
         <swiper-item>
           <image src="https://user-gold-cdn.xitu.io/2018/1/15/160f8b440965adf5" class="slide-image" width="355" height="150" />
         </swiper-item>
            </block>
          </swiper>
          <view class="wrap">
           <button bindtap='nextPage'>跳轉下一題</button>
          </view>
        </view>
</page>
複製程式碼

WXSS：

swiper{
  width: 80%;
  margin: 0 auto;
  margin-top: 20%;
  padding-top: 25px;
}
.wrap{
  display: flex;
  justify-content: space-around;
  margin-top: 25px;
}
.wrap-swiper{
  background: rgba(0,0,0, 0.1) ;
  padding-bottom: 25px;
  margin-left: 15px;
  margin-right: 15px;
}
複製程式碼

JS:

 Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true, //  是否顯示皮膚指示點
    autoplay: false, // 是否自動切換
    circular: true, // 是否採用銜接滑動
    current: 0, // 當前所在頁面的 index
    interval: 500, // 自動切換時間間隔
    duration: 500 // 滑動動畫時長
  },
  testDetails (e) {
    // bindchange事件
    console.log(e)
  },
  nextPage () {
    // 跳轉下一題
     let current = this.data.current
     current++
     if (current > 2) {
      current = 0
     }
  }
})
複製程式碼

執行效果:

滑動與自動跳轉效果對比

對比

通過上述，首先我們看到，當我們左右滑動時候，銜接效果是沒有毛病的，但是當我們去模擬跳轉的時候，問題出現了，銜接失效？這究竟是怎麼回事呢？現在我們就來看一下在bindchange事件（testDetails）的兩次log中發生了什麼？

問題

source

如上圖所屬，source（來源） 出現問題，模擬跳轉改變current方式改變了內部銜接跳轉的機制，那既然知道原因，那下一步的就要考慮如何模擬swiper內部的機制動作，那又該如何模擬呢？就要從autoplay這個內建屬性操刀了，廢話不說直接上程式碼！

JS（修改後）

小特性： 主動觸發swiper的autoplay特性，檢測bindchange事件的source來源，做動態動態關閉處理
 Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true, //  是否顯示皮膚指示點
    autoplay: false, // 是否自動切換
    circular: true, // 是否採用銜接滑動
    current: 0, // 當前所在頁面的 index
    interval: 500, // 自動切換時間間隔
    duration: 500 // 滑動動畫時長
  },
  testDetails (e) {
    console.log(e)
    if (e.detail.source == 'autoplay') {
      this.setData({
        autoplay: false
      })
    }
  },
  nextPage () {
    // 跳轉下一題
    this.setData({
      autoplay: true
    })
  }
})
複製程式碼

對比log（修改後）

『小程式開發』關於微信小程式內建元件swiper，circular（銜接）使用小技巧（實戰）

執行效果（修改後）

跑起來瞅一眼

『小程式開發』關於微信小程式內建元件swiper，circular（銜接）使用小技巧（實戰）

總結

本篇文章更多的是對於一些用法的分享，簡單的特性說明，更深層次的內容，有興趣的道友還是可以去研究下的，另外歡迎大家關注點贊，多謝！（持續更新中...）

（注：封面來源於網際網路，如有侵權，請聯絡作者刪除；如需轉載，請附原文連結及署名，多謝）

相關文章