官方文档里,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;
}