效果图：
main.js:
data: {
swiperCurrent: 0
},
swiperChange: function (e) {
console.log(e);
this.setData({
swiperCurrent: e.detail.current //获取当前轮播图片的下标
})
},
//点击指示点切换
changeIndex: function (e) {
this.setData({
swiperCurrent: e.currentTarget.id
})
}
main.wxml:
<scroll-view scroll-y="true">
<swiper autoplay='true' catchtap="onSwiperTap" interval="3000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange">
<block wx:for="{{allImages}}" wx:for-index="index">
<swiper-item>
<view class="ar_coverpath">
<image data-posturl="{{allImages[index]}}" src="{{allImages[index]}}" bindtap="previewImage" mode="aspectFill"/>
</view>
</swiper-item>
</block>
</swiper>
<!-- 实现页面图片展示效果 -->
<view class="dots">
<block>
<view id="{{index}}">{{swiperCurrent+1}}/4</view>
</block>
</view>
<!-- 实现点击选中样式 -->
<view class="dots">
<block wx:for="{{allImages}}" wx:for-index="index">
<view class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="changeIndex" id="{{index}}">{{index+1}}</view>
</block>
</view>
</scroll-view>
