微信小程序----解决swiper指示点样式

官方文档里，swiper的指示点默认是圆形，且只能修改其颜色。如果要修改形状需要弄清swiper里控制指示点的类，并对其中样式进行修改。

首先 ： 我们需要了解几个class swiper里控制指示点的类

1.wx-swiper-dot 指示点的类名

2.wx-swiper-dot-active 当前指示点的类名

有了这两个类名 改变颜色样式啥的就比较简单了

<view class='home-banener-box'>
    <swiper indicator-dots="true"
            autoplay="{{autoplay}}" circular="{{circular}}" interval="{{interval}}" duration="{{duration}}" style='height:{{Height}}'>
      <block wx:for="{{imgList}}" wx:key>
        <swiper-item>
          <image src="{{item.url}}" class='home-banener slide-image' mode='widthFix' bindload='imgHeight'/>
        </swiper-item>
      </block>
    </swiper>
  </view>

注意：
1、swiper中去掉默认指示点样式
indicator-dots、indicator-color等
2、添加指示点样式
.wx-swiper-dot、.wx-swiper-dot-active
注意：父级view的class名

.home-banener-box .wx-swiper-dot{
  width: 26rpx;
  height: 8rpx;
  border-radius:3rpx;
  background: #ccc;
}
.home-banener-box .wx-swiper-dot-active{
  background: #fff;
}