小編 / 達叔小生
參考官方文檔：https://developers.weixin.qq.com/miniprogram/dev/component/
小程序開發基礎-swiper 滑塊視圖容器
根據官方文檔，在自己的程序上運行，並打進代碼的效果圖，swiper滑塊視圖容器，是用來展示圖片，控制圖片的
swiper為滑塊視圖容器，其實就是輪播圖的效果。
代碼中indicator-dots="{{indicatorDots}}"的效果是用來顯示指示點的，就是圖片中下方的小圓圈。
autoplay="{{autoplay}}"為是否可以自動切換的效果，如果不設置，那就只有一張圖片顯示到界面中。
current="0"為當前顯示在哪個滑塊，為啥為0，因為默認值為0，可知從零開始算起嘛。
interval="{{interval}}"為自動切換時間的間隔，表示每張圖片顯示到它設定的時間就開始切換到下一個視圖即圖片，如果設定為3000即3秒，那么圖片展示到3秒后，進入到下一個圖片。
duration="{{duration}}"為滑動動畫時長，怎么理解呢？就是第一張圖片切換到第二張圖片的時長，即第一張滑出，第二張滑入到完，所用的時間長而已。
circular="{{circular}}"為是否采用銜接滑動，怎么理解呢？銜接？如果這個屬性不設定，那么如果輪播圖是三張圖片，第一張展示到第三張即最后展示完，它會返回到第一張，那樣的效果會不好看。如果設定了該屬性，且為true的話，那么展示完后，直接進入到第一張圖的界面。
<!--index.wxml-->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular='{{circular}}' current="0">
// 用於展示輪播圖效果
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150" />
</swiper-item>
</block>
</swiper>
// 用於定義是否顯示面板指示點
<button bindtap="changeIndicatorDots"> indicator-dots </button>
// 用於定義是否自動切換
<button bindtap="changeAutoplay"> autoplay </button>
// 滑動進度，這個按鈕效果用於更改自動切換時間間隔
<slider bindchange="intervalChange" show-value min="500" max="2000" /> interval
// 滑動進度，這個按鈕效果用於更改滑動動畫時長
<slider bindchange="durationChange" show-value min="1000" max="10000" /> duration
swiper的屬性
| 屬性 | 說明 |
|---|---|
| indicator-dots | 表示顯示面板的指示點，圖片下的小圓圈 |
| indicator-color | 表示指示點的顏色 |
| indicator-active-color | 表示當前選中的指示點顏色 |
| autoplay | 表示為是否自動切換 |
| current | 表示當前所在的滑塊 index |
| current-item-id | 當前所在滑塊的 item-id，不能與current被同時指定 |
| interval | 表示自動切換時間間隔 |
| duration | 表示為滑動動畫時長 |
| circular | 表示是否采用銜接滑動 |
| previous-margin | 表示前邊距，用於露出前一項的一小部分，接受 px 和 rpx 值，就是在整塊模板中露出前一項的一小部分 |
| next-margin | 表示后邊距，與上述同理 |
| display-multiple-items | 表示顯示的滑塊數量，就是顯示多少張圖在界面上，默認為1，如果定位2，那么就兩張圖片設定在界面上，界面各自分一半 |
| skip-hidden-item-layout | 表示是否跳過未顯示的滑塊布局，設為 true 可優化復雜情況下的滑動性能，但會丟失隱藏狀態滑塊的布局信息 |
| bindchange | current 改變時會觸發 change 事件，event.detail = {current: current, source: source} |
| bindanimationfinish | 動畫結束時會觸發 animationfinish 事件，event.detail 同上 |
//index.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,
circular: true,
autoplay: true,
interval: 2000,
duration: 1000
},
changeIndicatorDots: function(e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeAutoplay: function(e) {
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange: function(e) {
this.setData({
interval: e.detail.value
})
},
durationChange: function(e) {
this.setData({
duration: e.detail.value
})
}
})
在js中圖片資源來源於官方文檔，四種改變效果函數，changeIndicatorDots（顯示指示點），changeAutoplay（是否自動輪播），intervalChange（展示效果時長），durationChange（切換時間時長）
/**index.wxss**/
.slide-image{
width: 100%;
}
wxss只是讓圖片寬度占滿父元素而已。
注意事項
檢測 source 字段判斷是否由於用戶觸摸引起 ^ v ^
開源github分享
Wechat_small_program_Share
微信小程序分享🙈
Github 歡迎 Star、Fork
結語
- 本文主要講解 小程序開發基礎-swiper 滑塊視圖容器
- 下面我將繼續對其他知識 深入講解 ，有興趣可以繼續關注
- 小禮物走一走 or 點贊
