微信小程序 swiper 组件修改指示点 indicator-dots 的样式·

wxml 文件

<view class="container index-container">
  <view class="main-swiper">
    <swipe="true">
      <swiper-item>1</swiper-item>
      <swiper-item>2</swiper-item>
      <swiper-item>3</swiper-item>
    </swiper>
  </view>
</view>

样式文件

wxss 代码

.index-container .main-swiper .wx-swiper-dots.wx-swiper-dots-horizontal {
  margin-bottom: 2rpx;
}
.index-container .main-swiper .wx-swiper-dot {
  width: 30rpx;
  display: inline-flex;
  height: 10rpx;
  margin-left: 2rpx;
  justify-content: space-between;
}
.index-container .main-swiper .wx-swiper-dot::before {
  content: "";
  flex-grow: 1;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8rpx;
}
.index-container .main-swiper .wx-swiper-dot-active::before {
  background: rgba(244, 0, 0, 0.8);
}

gulp-scss 编译前代码

.index-container {

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

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

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

    .wx-swiper-dot-active::before {
      background: rgba(244, 0, 0, 0.8);
    }
  }
}