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

小程序官方文档中swiper组件的指示点默认是圆的，只能通过其组件属性修改指示点颜色，如要更改指示点形状可通过了解swiper组件指示点的类，对其样式进行修改，也可以通过view手写该指示点效果，这里我只演示手写的view指示点！（可维护性高）废话不多说，直接上代码！

wxml:

这里我跟swiper组件是兄弟元素

wxss:

/* 自定义轮播指示点样式 */

.indication{

  width: 400rpx;

  height: 36rpx;

  position: absolute;

  bottom: 0;

  display:flex;

  flex-direction:row;

  align-items:center;

  justify-content:center;

}

/* 未选中指示点样式 */

.spot{

  width: 12rpx;

  height: 10rpx;

  border-radius: 50%;

  margin-right: 26rpx;

  background-color: #80d1ff;

}

/*选中指示样式 */

.spot.active{

  width: 22rpx;

  height: 10rpx;

  border-radius: 6rpx;

  background-color: #fff;

}

js:

data: {

    imgList: ['/images/a.png', '/images/b.png'],

    currentIndex:0,

},

swiperChange: function (e) {

    this.setData({

      currentIndex: e.detail.current

    })

}

最终效果演示:

image