设置小程序轮播图指示点样式

作者: 一枚小菜 | 来源:发表于2020-05-31 11:23 被阅读0次

默认的指示点可以设置颜色和选中颜色

<swiper indicator-dots='true' indicator-color='#fff' indicator-active-color='#10c0e7'>

默认

如果我们要个性化设置指示点的样式，可以设置一个类名

<swiper class="swiper-box" autoplay='true' circular='true' interval="3000" duration="500" indicator-dots='true'>

以下样式设置了指示点颜色，形状，间距等属性

 .swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal {
  margin-bottom: 2rpx;
}

.swiper-box .wx-swiper-dot {
  width: 60rpx;
  display: inline-flex;
  height: 6rpx;
  margin-left: 2rpx;
  justify-content: space-between;
}

.swiper-box .wx-swiper-dot::before {
  content: '';
  flex-grow: 1;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8rpx;
}

.swiper-box .wx-swiper-dot-active::before {
  background: #2C77ED;
}

效果如图