其實官網已經有了相關說明，但是這個也是通過一個實例來說明一下，小程序的輪播效果：
先看一下效果圖：

JS代碼：

var app = getApp(); 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,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})}, }）

data中是要設置的數據。indicatorDots設置是否有點，interval設置每隔多少毫秒進行切換，duration設置切換的速度。中對所有的照片進行遍歷。這些值通過data然后在函數中進行設置。

WXML代碼：

<swiper indicator-dots="{{indicatorDots}}"autoplay="true" interval="5000" duration="1000"><block wx:for="{{imgUrls}}"><swiper-item><image src="{{item}}" class="slide-image" width="400" height="150"/></swiper-item></block></swiper>

以上就是這個輪播的的過程，主要應用組件，autoplay設置是否自動播放，interval設置每隔多少毫秒進行切換，duration設置切換的速度。中對所有的照片進行遍歷。

總結

以上是生活随笔為你收集整理的小程序轮播的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。