微信小程序: 轮播图组件swiper自定义指示点样式

一、首先我们先去到微信官方文档，引入swiper组件

<block>
    <swiper class="swiper_wrapper" indicator-dots>
      <block wx:for="{{XXX}}" wx:key="index">
        <swiper-item>
          <image src="{{item.XXX}}"></image>
        </swiper-item>
      </block>
    </swiper>
  </block>

二、开始自定义轮播图中的指示点的样式

1、.wx-swiper-dots 是小圆点指示器的父容器

2、.wx-swiper-dot 是圆点指示器一个点的样式

.swiper_wrapper {
  height: 420rpx;
}
.swiper_wrapper image {
  width: 100%;
  height: 100%;
}
.swiper_wrapper .wx-swiper-dots {
  position: absolute;
  bottom: 22rpx;
  left: 636rpx;
}
.swiper_wrapper .wx-swiper-dot {
  width: 10rpx;
  height: 4rpx;
  background: #FFFFFF;
  border-radius: 4rpx;
  opacity: 0.4;
}
.swiper_wrapper .wx-swiper-dot.wx-swiper-dot-active {
  width: 20rpx;
  height: 4rpx;
  background: #FFFFFF;
  border-radius: 4rpx;
  opacity: 1;
}

三、这是我自定义的样式给大家参考一下(仔细看，样式再右下角哦！)