小程序轮播图改变圆点样式

wxml

<view class="swiper-box">
    <swiper autoplay="{{autoplay}}" bindchange="swiperChange" current="{{currentSwiper}}" interval="{{interval}}" duration="{{duration}}" circular="true">
        <block wx:for="{{advimg}}">
            <swiper-item>
                <navigator url="{{item.link}}" hover-class="navigator-hover">
                    <image src="{{item.url}}" class="slide-image" />
                </navigator>
            </swiper-item>
        </block>
    </swiper>
    <view class="dots">
        <block wx:for="{{advimg}}" wx:key>
            <view class="dot{{index == currentSwiper ? ' dot-active' : ''}}"></view>
        </block>
    </view>
</view>

wxss

.swiper-box {
  height: auto;
  position: relative;
}


.dots {
  height: 20rpx;
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 60rpx;
}

/*未选中时的小圆点样式 */

.dot {
  margin-left: 10rpx;
  width: 10rpx;
  height: 10rpx;
  border-right: 5rpx;
  border-radius: 14rpx;
  background-color: rgba(0, 0, 0, 0.5)
}

/*选中以后的小圆点样式  */

.dot-active {
  width: 29rpx;
  height: 10rpx;
  margin-right: 26rpx;
  background-color: #FFFFFF;
  transform: translateX(-25%)
}

js

Page({
data:{
imgUrls: [{
        link: "/pages/index/index",

        url: "/images/screen1.png",
      },
      {
        link: "/pages/logs/logs",

        url: "/images/screen1.png",
      },
      {
        link: "/pages/index/index",

        url: "/images/screen1.png",
      },
    ],

    currentSwiper: 0,
    autoplay: true, //是否自动轮播
    interval: 3000, //间隔时间
    duration: 3000, //滑动时间
    }
onLoad: function (options) {
    this.setData({
      advimg: this.data.imgUrls,
    })

  },

swiperChange: function (e) {
    this.setData({
      currentSwiper: e.detail.current
    })
  }
  
})