Business need: picture turns playback, you can slide around, click on the picture to switch indicating the point
As used herein applet provided
autoplay: auto play
interval: automatic switching time
duration: the length of the sliding animation of
current: the page currently located
bindchange: triggers the change event when current change
due
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>
<!-- 实现点击选中样式 -->
<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 //获取当前轮播图片的下标
})
},
//点击指示点切换
chuangEvent: function (e) {
this.setData({
swiperCurrent: e.currentTarget.id
})
},
//获取图片在onload就可以进行。
Original: https://www.cnblogs.com/xuzhengzong/p/8056262.html