小程序官方文档中swiper组件的指示点默认是圆的，只能通过其组件属性修改指示点颜色，如要更改指示点形状可通过了解swiper组件指示点的类，对其样式进行修改，也可以通过view手写该指示点效果，这里我只演示手写的view指示点！（可维护性高）废话不多说，直接上代码！
wxml:
这里我跟swiper组件是兄弟元素
<swiper class='' current="{{currentIndex}}" bindchange="swiperChange" style="height:{{imgheights[currentIndex]}}rpx;" >
<block wx:for='{{imgList}}' wx:key="{{index}}">
<swiper-item class='swiper-item'>
<image src='{{item}}' mode="widthFix" data-id="{{index}}" bindload="imageLoad" />
</swiper-item>
</block>
</swiper>
<view class="indication">
<block wx:for="{{imgList}}" wx:key="imgList">
<view class="spot{{index == currentIndex? ' active' : ''}}"></view>
</block>
</view>
wxss:
/* 自定义轮播指示点样式 */
.indication{
width: 400rpx;
height: 36rpx;
position: absolute;
bottom: 0;
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
/* 未选中指示点样式 */
.spot{
width: 12rpx;
height: 10rpx;
border-radius: 50%;
margin-right: 26rpx;
background-color: #80d1ff;
}
/*选中指示样式 */
.spot.active{
width: 22rpx;
height: 10rpx;
border-radius: 6rpx;
background-color: #fff;
}
js:
data: {
imgList: ['/images/a.png', '/images/b.png'],
currentIndex:0,
},
swiperChange: function (e) {
this.setData({
currentIndex: e.detail.current
})
}
最终效果演示:
image
