自定义小程序swiper指示点样式

小程序不提供swiper指示点的样式自定义。只能自己写一个指示点样式，替换掉。

index.wxml

<view class='warp'>

  <swiper class='swiper' current='{{currentSwiper}}' autoplay bindchange='swiperChange'>

    <block wx:for="{{imgUrls}}" wx:key="">

      <swiper-item>

        <image src='{{item}}' class='img'></image>

      </swiper-item>

    </block>

  </swiper>

  <view class='dots'>

    <block wx:for="{{imgUrls}}" wx:key="">

      <view class='dot {{index == currentSwiper ?"active":""}}'></view>

    </block>

  </view>

</view>

index.wxss

.warp{

  height: auto;

  position: relative;

}

.swiper{

  height: 220rpx;

}

.swiper .img{

  width: 100%;

  height: 100%;

}

.dots{

  width: 256rpx;

  height: 36rpx;

  display: flex; 

  flex-direction: row;

  position: absolute;

  right: 20rpx;

  bottom: 5rpx;

  justify-content: center;

  align-items: center;

}

.dot{

width: 30rpx;

height: 8rpx;

border-radius: 30rpx;

margin-right: 10rpx;

background-color: white;

}

.active{

  width: 70rpx;

  background-color: coral;

}

index.js

Page({

  data: {

    imgUrls: [

      'http://47.105.139.205/1.jpg',

      'http://47.105.139.205/2.jpg',

      'http://47.105.139.205/3.jpg'

    ],

    currentSwiper : 0 

  },

  swiperChange:function(event){     

    this.setData({

      currentSwiper: event.detail.current

    });

  },

})