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);。这样未选中指示点样式宽度短,不会有多余背景露出了