• 微信号:wumiao_357234902

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

作者:Miao 阅读:5758次

微信小程序中的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">

本站部分文章、数据、素材收集于网络,所有版权均归源网站或原作者所有!

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