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

作者：admin 阅读：2034次

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

这里没有什么特别逻辑，就直接贴代码吧。
**wxml**
```html
<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**
```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);}
```
**效果展示**
![](/static/upload/image/20220510/1652174210873119.png)

**其它：**比如说当swiper只有一页的时候，我们也是可以把指示点隐藏了的，因为只有一屏的时候，其实指示点的意义不是很大，这里是需要在 indicator-dots 加个判断就行。
```html
<swiper class="ad-swiper" indicator-dots="{{list.length>1?true:false}}" autoplay="true" duration="300">
```

赞一个 (18)

本站部分文章、数据、素材收集于互联网，一切版权均归源网站或原作者所有！

如果侵犯了您的权益请来信告知我们删除，邮箱：357234902@qq.com

标签：微信小程序