UI图中轮播显示的是数字而不是指示点,所以需要自己用css写一下
效果:
html相关代码
<view class="page-section page-section-spacing swiper">
<swiper class="swiperBox" indicator-dots="{{indicatorDots}}" bindchange="swiperChange" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
<block wx:for="{{3}}" wx:key="*this">
<swiper-item class="swiperItem" >
<image class="swiperImg" src="https://attached-file.oss-cn-shanghai.aliyuncs.com/images/17889beb0f2c608100f3dc96e3824d29.JPG"></image>
</swiper-item>
</block>
</swiper>
<view class="indexShow" wx:if="imagesUrl.length>1">
{{swiperIndex}} / imagesUrl.length
</view>
<view class="indexShow" wx:else>
{{swiperIndex}} / imagesUrl.length
</view>
</view>
js相关代码
Page({
data: {
autoplay:true,
indicatorDots:false,
interval:4000,
duration:500,
circular:true,
swiperIndex:1
},
//事件处理函数
swiperChange(e){
this.setData({
swiperIndex:e.detail.current +1
})
},
onLoad: function () {
},
css相关代码
.indexShow{
position: absolute;
right: 20rpx;
bottom: 20rpx;
background:rgba(255,255,255,0.31);
color: #FFF;
font-size: 24rpx;
padding: 5rpx 30rpx;
border-radius: 30rpx;
}
把指示器隐藏自己写个样式就可以了