微信小程序 uniapp 轮播图 swiper 自定义指示点 dot样式

效果图：

html代码：

css样式：

.img-swipe {
  width: 690rpx;
  height: 320rpx;
  border-radius: 16rpx;
}
.ad-imgs {
  width: 100%;
  height: 100%;
  border-radius: 16rpx;
}
.ad-img {
  width: 690rpx;
  height: 320rpx;
  border-radius: 16rpx;
  z-index: 100;
}
.dots-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24rpx;
  display: flex;
  justify-content: center;
}
.dot {
  margin: 0 8rpx;
  width: 12rpx;
  height: 12rpx;
  background: rgba(235, 237, 240, 0.3);
  opacity: 1;
  border: 2rpx solid #FFFFFF;
  border-radius: 8rpx;
}
.dot.active {
  background: #FFFFFF;
}

js代码：

data() {
  return {
    couponAds: [
      {image: '/portal/image/2020-7-28/e37805a0d0a011ea917455c9a92580c3-thumb.jpg'},
      {image: '/portal/image/2020-5-18/71d40ec098ca11ea91cc172cf0202714-thumb.jpg'}
    ],
    current: 0,
    swiperCurrent: 0
  }
},

methods: {
  swiperChange (e) {
    this.swiperCurrent = e.detail.current
  }
}

注意：swiper的current值（current）一定不能和指示点的active index值（swiperCurrent）一致，否则会造成swiper抖动，闪烁。