小程序轮播
其實(shí)官網(wǎng)已經(jīng)有了相關(guān)說明，但是這個也是通過一個實(shí)例來說明一下，小程序的輪播效果：
先看一下效果圖：
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中是要設(shè)置的數(shù)據(jù)。indicatorDots設(shè)置是否有點(diǎn)，interval設(shè)置每隔多少毫秒進(jìn)行切換，duration設(shè)置切換的速度。中對所有的照片進(jìn)行遍歷。這些值通過data然后在函數(shù)中進(jìn)行設(shè)置。
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>以上就是這個輪播的的過程，主要應(yīng)用組件，autoplay設(shè)置是否自動播放，interval設(shè)置每隔多少毫秒進(jìn)行切換，duration設(shè)置切換的速度。中對所有的照片進(jìn)行遍歷。
總結(jié)
