微信小程序自定义轮播图指示点（新建指示点）

1.实现效果

2.代码

<view class="top">
  <swiper current="{{swiperCurrent}}" bindchange="swiperChange"  circular="true" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{goodsInfo.imgList}}">
      <swiper-item>
        <image src="{{item}}" data-src="{{item}}" class="img_goodcover" bindtap="previewImage"></image>
      </swiper-item>
    </block>
  </swiper>
  <!-- 指示点 -->
  <view class="dots flex-row">
    <block wx:for="{{goodsInfo.imgList.length}}" wx:key>
      <view class="{{index==swiperCurrent?'active':'dot'}}" data-index="{{index}}"></view>
    </block>
  </view>
</view>

.top{
  width: 750rpx;
  height: 750rpx;
  background: #FFFFFF;
  position: relative;
}
.top swiper{
  width: 750rpx;
  height: 750rpx;
}
.img_goodcover{
  width: 750rpx;
  height: 750rpx; 
}
/* dot */
.dots{
  margin: 54rpx auto 0;
  justify-content: center;
  position: absolute;
  bottom: 30rpx;
  left: 35%;
}
.dot{
  width: 60rpx;
  height: 4rpx;
  background: #ECECEC;
  border-radius: 2rpx;
}
.active{
  width: 60rpx;
  height: 4rpx;
  background: #0F5EC5;
  border-radius: 2rpx;
}

data: {
    autoplay: true, //是否自动切换
    interval: 3000, //自动切换时间间隔,3s
    duration: 1000, //  滑动动画时长1s
    swiperCurrent:'',
  },
  swiperChange:function(e){
    this.setData({
      swiperCurrent:e.detail.current
    })
  },