微信小程序之轮播图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 组件的指示点样式。