微信小程序自定义修改轮播图swiper指示器的样式

默认的小程序轮播图组件样式是圆点点。

有时候UI需要改指示器的样式

使用：

<swiper :autoplay="false" :indicator-dots="true">
           <swiper-item class="menu" v-for="(cMenu,index) in menuCList">
              <div class="menu-item" v-for="item in cMenu" @tap="linkToList(item)"> 
                <img class="menu-img" :src="item.attr_image_url" />
              </div>
          </swiper-item>
      </swiper>
           

样式覆盖：

// 菜单
  .menu-wrap {
    .wx-swiper-dot{
      background-color:#b9b9b9;
      height: 8rpx;
      width: 10rpx;
      border-radius: 50%;
    }
    .wx-swiper-dot.wx-swiper-dot-active{
      background-color:#f55f66;
      height: 8rpx;
      width: 20rpx;
      border-radius: 20rpx;
    }
    .wx-swiper-dots.wx-swiper-dots-horizontal {
      margin-bottom: -8rpx;
    }
  }
           

.wx-swiper-dot

默认小圆点

.wx-swiper-dot.wx-swiper-dot-active

小圆点激活样式

我们还可以通过

.wx-swiper-dots.wx-swiper-dots-horizontal

来调整位置

譬如另外一个示例：

.wx-swiper-dots {
    position: relative;
    left: unset !important;
    right: 0;
}

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