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

子组件

<swiper circular indicator-dots="true" autoplay interval="{{5000}}" duration="{{1000}}"
  indicator-color="#ffffff99" indicator-active-color="#FFFFFF" class="home-swiper"
  @change="onSwiperChange">
  <block wx:for="{{newsList}}" wx:for-item="item" wx:key="index">
    <swiper-item>
      <image src="{{item}}" mode="scaleToFill" class="home-swiper-img" @tap.stop="mediaClick"
        data-item="{{item}}" />
    </swiper-item>
  </block>
</swiper>

父组件

调用子组件

<Component class="home-swiper-wrap" /> 

自定义dot样式

必须写在父组件中，不然不生效

.home-swiper-wrap {
  .home-swiper {
    /* 修改dot形状 */
    .wx-swiper-dots .wx-swiper-dot{
      width: 8rpx;    /*宽*/
      height: 8rpx;   /*高*/
      border-radius: 4rpx;  /*圆角*/
    }

    /* 修改dot之间的间距 */
    .wx-swiper-dots .wx-swiper-dot:nth-of-type(n+2) {
      margin-left: 0rpx;
    }

    /* 修改选中dot形状 */
    .wx-swiper-dots .wx-swiper-dot.wx-swiper-dot-active {
      width: 24rpx;
      height: 8rpx;
      border-radius: 4rpx;
    }

    /* 调成dots的位置 */
    .wx-swiper-dots.wx-swiper-dots-horizontal {
      bottom: 87rpx;
      text-align: center;
    }
  }
}

• .wx-swiper-dots： 指示器的父容器样式类名，默认横向
  – .wx-swiper-dots-horizontal： 表示横向
  – .wx-swiper-dots-vertical： 表示纵向

• .wx-swiper-dot： 指示器样式类名

• .wx-swiper-dot-active： 当前指示器样式类名