微信小程序：自定义swiper 圆点的样式

// 圆点上下位置 [注意：此处没有空格]
.wx-swiper-dots.wx-swiper-dots-horizontal {
    margin-bottom: -16rpx;
}
// 圆点样式
.wx-swiper-dots .wx-swiper-dot { 
  width: 10rpx;
  height: 10rpx;
  margin: 0 5rpx;
}
// 当前选中圆点样式
.wx-swiper-dots .wx-swiper-dot.wx-swiper-dot-active {
    width: 16rpx;
    border-radius: 10rpx;
}

<view class="page-home__swiper-wrap">
  <swiper indicator-dots="true"
          autoplay="{{false}}"
          interval="2000"
          duration="500">
    <block wx:for="{{list}}"
           wx:key="*this">
      <swiper-item>
        <view>
          {{item}}
        </view>
      </swiper-item>
    </block>
  </swiper>
</view>

.page-home{
    &__swiper-wrap {
    height: 300rpx;
    .wx-swiper-dots {
      // 圆点样式
      .wx-swiper-dot {
        width: 8rpx;
        height: 8rpx;
        background: #cdd1d9;
        margin: 0 5rpx;
        // 当前选中圆点样式
        &.wx-swiper-dot-active {
          width: 16rpx;
          height: 8rpx;
          background: #ff9000;
          box-shadow: 0 2rpx 24rpx 0rpx rgba(199, 107, 1, 0.3);
          border-radius: 4rpx;
        }
      }
      // 圆点上下位置
      &.wx-swiper-dots-horizontal {
        margin-bottom: -5rpx;
      }
    }
  }
}