1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 微信小程序 — 自定义轮播图的面板指示点样式

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

时间:2021-09-15 04:34:44

相关推荐

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

swiper默认指示板样式是小圆点。实现如图效果 (选中的椭圆样式,宽一点)

实现方式:修改swiper的css样式。

/* 圆点的样式 因为大小不一样。所以按钮设置大小之后,背景色记得设置完全透明*/swiper .wx-swiper-dot {width: 30rpx;height: 6rpx;display: inline-flex;flex-direction: row;justify-content: center;background: rgba(255, 255, 255,0);}/* 未选中 */swiper .wx-swiper-dot::before {width: 20rpx;height: 10rpx;content: '';border-radius: 5rpx;/* flex-grow:1; */background: rgba(255, 255, 255,0.3);}/* 选中 */swiper .wx-swiper-dot-active::before {width: 30rpx;height: 10rpx;border-radius: 5rpx;background: rgba(255, 255, 255,1);}

注意点:

(1)因为选中指示点和未选中的指示点大小不一样。所以未选中设置的width会小,

选中设置的width宽度和指示点本身大小是一样。

(2)因为未选中的宽度比较短。所以wx-swiper-dot要把背景设置完全透明

background: rgba(255, 255, 255,0);。这样未选中指示点样式宽度短,不会有多余背景露出了

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。