小程序轮播图指示点样式修改

  <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" circular="{{circular}}" duration="{{duration}}">
    <swiper-item wx:for="{{syshuju.banner}}" wx:key="*" >
      <image src="{{item.image}}"></image>
    </swiper-item>
  </swiper>

/* 轮播图面板知识点 */
.swiper .wx-swiper-dots .wx-swiper-dots-horizontal{
  margin-bottom: 2rpx;
}
.swiper .wx-swiper-dot{
 width:40rpx;
 display: inline-flex;
 height: 10rpx;
 margin-left: 10rpx;
 justify-content:space-between;
}
.swiper .wx-swiper-dot::before{
 content: '';
 flex-grow: 1; 
 background: rgba(255,255,255,0.8);
 border-radius: 8rpx
}
.swiper .wx-swiper-dot-active::before{
 background:rgba(244,0,0,0.8);   
}

Page({
  data: {
    indicatorDots:true,//是否显示面板指示点
    autoplay: true,//是否自动切换
    circular:true,//是否采用衔接滑动
    interval: 3000,//自动切换时间间隔
    duration: 1000,//滑动动画时长
  },

})

本文地址：https://blog.csdn.net/qq_35376043/article/details/107149964