微信小程序 Swiper 自定义指示点样式
微信小程序 Swiper 自定义指示点样式,默认情况下微信小程序的 Swiper 可以自定义样色,但是不能修改样式,根据 UI 设计的需要做成下面的样式:
.banner .wx-swiper-dots.wx-swiper-dots-horizontal {
margin-bottom: 2rpx;
}
.banner .wx-swiper-dot {
width: 6px;
display: inline-flex;
height: 6px;
margin-left: 2px;
justify-content: space-between;
}
.banner .wx-swiper-dot::before {
content: '';
flex-grow: 1;
background: rgba(255, 255, 255, 0.2);
border-radius: 6px
}
.banner .wx-swiper-dot-active {
width: 22px;
}
.banner .wx-swiper-dot-active::before {
background: #FFF;
width: 22px;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论