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

微信小程序 - swiper组件

定义一个轮播图 swiper 组件：

// swiper.wxml<swiper indicator-dots="true"><block wx:for="{{imgURL}}" wx:key="*this"><swiper-item><view class="swiper-item {{item}}"></view></swiper-item></block></swiper>

修改轮播图 swiper 组件的样式（注意对应的class类名）

// swiper.wxss/* 默认指示点的样式 */.swiper .wx-swiper-dot {width: 15rpx;height: 15rpx;background: #eee;border-radius: 50%;}/* 选中指示点的样式 */.swiper .wx-swiper-dot.wx-swiper-dot-active {width: 30rpx;height: 15rpx;background: #2782D7;border-radius: 15rpx;}

只要在上面对应的两个类样式中进行修改，就可以实现自定义 swiper 组件的指示点样式。