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