微信小程序 自定义轮播图指示点

  <view>
    <swiper class="bgBox" indicator-dots="true"
        autoplay="true" interval="20000" duration="500" indicator-active-color='#FFFFFF'>
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <view class="bgImg"><image src="{{item}}"></image></view>
          </swiper-item>
        </block>
      </swiper>
  </view>

/* 轮播图指示点样式 */
.bgBox .wx-swiper-dots.wx-swiper-dots-horizontal{ //控制指示点向下的距离
  margin-bottom: 78rpx;
}
.wx-swiper-dots{ //控制指示点左右的位置
  position:relative;
  left: unset!important;
  right: 0;
}

.bgBox .wx-swiper-dot{ //指示点初始样式
  width:10rpx;
  height: 10rpx;
  background: white;
  border-radius: 10rpx;
}
.bgBox .wx-swiper-dot.wx-swiper-dot-active {//指示点选中的样式
  width: 30rpx;
  height: 10rpx;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 13rpx;
}