小程序实轮播图自定义指示点

Posted DomAndBom

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序实轮播图自定义指示点相关的知识,希望对你有一定的参考价值。

//按钮
.wx-swiper-dots.wx-swiper-dots-horizontal{
margin-bottom: 5rpx;
float: left;
text-align: center;
}
.wx-swiper-dot::before{
content: ‘‘;
flex-grow: 1;
background: white;
border-radius: 15rpx;
border: 0rpx;
opacity: 0.5;
}
.wx-swiper-dot.wx-swiper-dot{
width: 12rpx;
height: 12rpx;
border-radius: 12rpx;
background: white;
opacity: 0.5;
}
.wx-swiper-dot.wx-swiper-dot-active{
width: 30rpx;
height: 12rpx;
border-radius: 12rpx;
background:white;
opacity: 1;
}

以上是关于小程序实轮播图自定义指示点的主要内容,如果未能解决你的问题,请参考以下文章

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

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

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

bootstrap之carousel轮播图自定义分页器

小程序旋转木马 轮播图

小程序轮播图样式