先上效果图:
JS:
swiperChange: function(e) {
if (e.detail.source == 'touch') {
this.setData({
current: e.detail.current
})
}
},
swiper 组件中,current:当前所在滑块的 index(用于计算当前页),当前图片index+1/图片数组长度,获取到当前页/总页。通过 bindchange 事件:current 改变时会触发 change 事件,event.detail = {current: current, source: source}。注意:如果在 bindchange
的事件回调函数中使用 setData
改变 current
值,则有可能导致 setData
被不停地调用,因而通常情况下请在改变 current
值前检测 source
字段来判断是否是由于用户触摸引起。小程序组件
HTML:
<view class="swiperContainer">
<swiper bindchange="swiperChange" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style='height: 380rpx;'>
<block wx:for="{{imgUrls}}" wx:key="*this">
<swiper-item wx:key="*this">
<image src="{{item}}" class="slide-image" mode="center" class='img' mode='widthFix' />
</swiper-item>
</block>
</swiper>
<view class="imageCount">{{current+1}}/{{imgUrls.length}}</view>
</view>
CSS:
.swiperContainer {
position: relative;
}
.img {
width: 100%;
}
.imageCount {
width: 80rpx;
height: 60rpx;
background-color: #c5c5cc;
border-radius: 50%;
line-height: 58rpx;
color: #fff;
text-align: center;
font-size: 26rpx;
position: absolute;
right: 26rpx;
bottom: 20rpx;
}
JS:
data: {
imgUrls: [
'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/b51889744910df7979a2f672434da84e.jpg?thumb=1&w=720&h=360',
'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/37dfdc929ee9a4313facb0b23ebcd721.jpg?thumb=1&w=720&h=360',
'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a0ff3dc30027f3b615bfe03f1d306ee5.jpg?thumb=1&w=720&h=360',
'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2320573b3be643e29f5270a97e1a9c1d.jpg?thumb=1&w=720&h=360'
],
current: 0
},