// 圆点上下位置 [注意：此处没有空格]
.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;}

Less样式写法

wxml

<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>

wxsss

.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;
      }
    }
  }}

！注意

需要说明的是，上样式需要写在页面page中的样式文件中，不能在自定义组件中写，不然会不生效。

如果swiper在自定义组件中使用，修改样式需要写在引用该组件的页面page里

参考
小程序swiper轮播图，自定义样式，两种方法：…