業(yè)務(wù)需求：圖片輪番播放，可以左右滑動(dòng)，點(diǎn)擊指示點(diǎn)可以切換圖片
這里使用小程序提供的<swiper>組件
autoplay：自動(dòng)播放
interval：自動(dòng)切換時(shí)間
duration：滑動(dòng)動(dòng)畫(huà)的時(shí)長(zhǎng)
current：當(dāng)前所在的頁(yè)面
bindchange：current 改變時(shí)會(huì)觸發(fā) change 事件
由于<swiper>組件提供的指示點(diǎn)樣式比較單一华望，另外再自定義指示點(diǎn)的樣式
index.wxml ：
<scroll-view scroll-y="true">
<swiper catchtap="onSwiperTap" autoplay="auto" interval="3000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange">
<block wx:for="{{home_pics}}" wx:for-index="index">
<swiper-item>
<view class="ar_coverpath">
<image data-posturl="{{home_pics[index]}}" src="{{home_pics[index]}}" bindtap="previewImage" mode="aspectFill"/>
</view>
</swiper-item>
</block>
</swiper>
<!-- 實(shí)現(xiàn)點(diǎn)擊選中樣式 -->
<view class="dots">
<block wx:for="{{home_pics}}" wx:for-index="index">
<view class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvent" id="{{index}}">{{index+1}}</view>
</block>
</view>
</scroll-view>
index.js：
data: {
swiperCurrent: 0
},
//輪播圖的切換事件
swiperChange: function (e) {
console.log(e);
this.setData({
swiperCurrent: e.detail.current //獲取當(dāng)前輪播圖片的下標(biāo)
})
},
//點(diǎn)擊指示點(diǎn)切換
chuangEvent: function (e) {
this.setData({
swiperCurrent: e.currentTarget.id
})
},
//獲取圖片在onload就可以進(jìn)行丈秩。
