小程序開發基礎-swiper 滑塊視圖容器

小編 / 達叔小生git

參考官方文檔：https://developers.weixin.qq.com/miniprogram/dev/component/github

小程序開發基礎-swiper 滑塊視圖容器

根據官方文檔，在本身的程序上運行，並打進代碼的效果圖，swiper滑塊視圖容器，是用來展現圖片，控制圖片的小程序

swiper爲滑塊視圖容器，其實就是輪播圖的效果。微信小程序

代碼中indicator-dots="{{indicatorDots}}"的效果是用來顯示指示點的，就是圖片中下方的小圓圈。微信

autoplay="{{autoplay}}"爲是否能夠自動切換的效果，若是不設置，那就只有一張圖片顯示到界面中。xss

current="0"爲當前顯示在哪一個滑塊，爲啥爲0，由於默認值爲0，可知從零開始算起嘛。ide

interval="{{interval}}"爲自動切換時間的間隔，表示每張圖片顯示到它設定的時間就開始切換到下一個視圖即圖片，若是設定爲3000即3秒，那麼圖片展現到3秒後，進入到下一個圖片。函數

duration="{{duration}}"爲滑動動畫時長，怎麼理解呢？就是第一張圖片切換到第二張圖片的時長，即第一張滑出，第二張滑入到完，所用的時間長而已。oop

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 點贊