這篇文章將為大家詳細講解有關微信小程序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 | |
| interval | Number | 5000 | 自動切換時間間隔 | |
| duration | Number | 500 | 滑動動畫時長 | |
| circular | Boolean | false | 是否采用銜接滑動 | |
| vertical | Boolean | false | 滑動方向是否為縱向 | |
| bindchange | EventHandle | current 改變時會觸發 change 事件，event.detail = {current: current, source: source} |
從公共庫v1.4.0開始，change事件返回detail中包含一個source字段，表示導致變更的原因，可能值如下：
autoplay自動播放導致swiper變化；
touch用戶劃動引起swiper變化；
其他原因將用空字符串表示。
注意：其中只可放置<swiper-item/>組件，否則會導致未定義的行為。
僅可放置在<swiper/>組件中，寬高自動設置為100%。
示例代碼：
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<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"/> durationPage({
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: false,
autoplay: false,
interval: 5000,
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
})
}
})關于“微信小程序swiper怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
