小程序中轮播图的指示点换成数字显示

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/178beb0f2c608100f3dc96e3824d29.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;
}

把指示器隐藏自己写个样式就可以了