自定义swiper轮播图面板指示点的样式 微信小程序

微信小程序中的swiper组件是滑块视图容器，但是有很多样式是固定的，而实际使用的时候可能会根据轮播图大小、样式，可能就需要改变指示点的样式。（常见：修改指示点颜色、把知识点修改为小长方形等）。

这里没有什么特别逻辑，就直接贴代码吧。

wxml

<swiper class="ad-swiper" indicator-dots="true" autoplay="true" duration="300">
	<block wx:for="{{3}}" wx:key="index">
		<swiper-item>
			<image src="" lazy-load="true"></image>
		</swiper-item>
	</block>
</swiper>

css

.ad-swiper .wx-swiper-dots.wx-swiper-dots-horizontal{ margin-bottom: -20rpx;}
.ad-swiper .wx-swiper-dot{ width: 12rpx; height: 12rpx; display: inline-flex; justify-content:space-between; margin-left: -8rpx;}
.ad-swiper .wx-swiper-dot::before{ content: ''; flex-grow: 1; background: rgba(255,255,255,1); border-radius: 22rpx;}
.ad-swiper .wx-swiper-dot-active{ width: 22rpx;}
.ad-swiper .wx-swiper-dot-active::before{ background: rgba(250,53,118,1);}

效果展示

其它：

比如说当swiper只有一页的时候，我们也是可以把指示点隐藏了的，因为只有一屏的时候，其实指示点的意义不是很大，这里是需要在 indicator-dots 加个判断就行。

<swiper class="ad-swiper" indicator-dots="{{list.length>1?true:false}}" autoplay="true" duration="300">