微信小程序swiper指示点样式修改

在你的.wxml文件里面 找到你的<swiper></swiper> 添加一个你喜欢的类名 像这样

      <swiper class="lunbo" indicator-dots="{{indicatorDots}}" ></swiper>

然后在对应的.wxss文件 里面粘贴我的代码  注释已经写好

/*轮播图指示点*/
.lunbo .wx-swiper-dots.wx-swiper-dots-horizontal{
  margin-bottom: 2rpx;
}
.lunbo .wx-swiper-dot{
 width:50rpx;/*点的长*/
 display: inline-flex;
 height: 10rpx; /*点的高*/
 margin-left: 5rpx;  /*两个点的距离*/
 justify-content:space-between;
}
.lunbo .wx-swiper-dot::before{
 content: '';
 flex-grow: 1; 
 background : #A1C7F8; /*点的未选中颜色*/
 border-radius: 0rpx;
}
.lunbo .wx-swiper-dot-active::before{
 background:#4C84FB;   /*点的选中颜色*/
}

.lunbo .wx-swiper-dot.wx-swiper-dot{ /*点的未选中样式*/
  width: 10rpx;
  border-radius: 10rpx;
}
.lunbo .wx-swiper-dot.wx-swiper-dot-active{/*点的选中样式*/
  width: 40rpx;
  height: 10rpx;
}