微信小程序使用swiper改变导航小圆点的样式与位置

        小程序中很多都会使用到轮播图，swiper 插件简单又好用。但是默认的导航点样式可能不符合日常开发的需求，所以很多项目中就需要修改导航点的样式。以下是修改前和修改后样式。

 以下是WXML做的修改

<swiper class='swiperClass' circular autoplay bindchange="swiperChange">
    <view wx:for="{{activeList}}" wx:key="index">
        <swiper-item>
            <image src="{{item.activePicture}}" class="slide-image"></image>
            </swiper-item>
    </view>
</swiper>
<!-- 导航点 -->
<view class="dots">
    <block wx:for="{{activeList}}" wx:key="unique">
        <view data-i='{{index}}' class="dot {{index == swiperCurrent ? ' active' : ''}}"></view>
    </block>
</view>

下面是wxss样式修改

.swiperClass{
  height: 476rpx;
}

.swiperClass image{
  width: 336rpx;
  height: 476rpx;
  border-radius: 10rpx;
}

/* 导航点 */
.dots{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10rpx;
  display: flex;
  justify-content: center;
  height: 20rpx;
}


.dots .dot{
  margin: 0 6rpx;
  width: 9rpx;
  height: 9rpx;
  background: #E2E1DD;
  border-radius: 50%;
}

.dots .dot.active {
  width: 25rpx;
  height: 9rpx;
  background: #2880FE;
  border-radius: 15rpx;
}

以下为JS部分

data: {
    swiperCurrent: 0, //当前导航点
},
//图片变化时
swiperChange: function (e) {
    this.setData({
        swiperCurrent: e.detail.current
    })
},