微信小程序swiper组件实现数字下标

微信小程序swiper组件实现数字下标效果：
微信小程序swiper组件，indicator-dots的默认值就是不显示面板指示点。单独写一个view控制在轮播图右下角。一个当前数字，一个总数字。效果图如下：

wxml：

<swiper duration="{{duration}}" bindchange="swiperChange">
    <block wx:for="{{imageList}}" wx:key="*this">
      <swiper-item>
        <view class="swiper-item">
          <image src="{{item}}" mode="aspectFill" />
        </view>
      </swiper-item>
    </block>
  </swiper>

wxss：

.quanyi-swiper {
  position: relative;
}

.quanyi-swiper swiper {
  display: block;
  width: 750rpx;
  height: 750rpx;
  position: relative;
}

.quanyi-swiper .swiper-item image {
  display: block;
  width: 750rpx;
  height: 750rpx;
}

.swiper-dot {
  position: absolute;
  background-color: #00000075;
  width: 90rpx;
  height: 45rpx;
  right: 10rpx;
  bottom: 10rpx;
  font-size: 26rpx;
  text-align: center;
  line-height: 45rpx;
  border-radius: 50rpx;
  color: #ffffff;
}

js:

data: {
    imageList: ['https://www.xxxxxx.com/uploads/10001/20240821/c2b0daf0bc417fb614b7c1a25977cec0.jpg', 'https://www.xxxxxx.com/uploads/10001/20240821/0a86e0fbb216b2a002369b2da6cf8895.jpg', 'https://www.xxxxxx.com/uploads/10001/20240821/7fe5359a4a3f01bc7a1c94554f53e6b4.jpg'],
    currentIndex: 1,
  },

onLoad(options) {
    this.setData({
      totalImages: this.data.imageList.length
    })
  },

swiperChange(e) {
    this.setData({
      currentIndex: e.detail.current + 1
    })
  },