小程序组件swiper-如何修改面板指示点样式

官方文档里，swiper的指示点默认是圆形，且只能修改其颜色。如果要修改形状，有两种思路：

1.隐藏官方的面板指示点（官方有提供属性可以隐藏），自己用view重写组件 (个人觉得这个比较麻烦 此篇文章不做讲解)

2.弄清swiper里控制指示点的类，并对其中样式进行修改。

第二种方法怎么修改指示点样式呢？

首先 ： 我们需要了解几个class swiper里控制指示点的类

1.wx-swiper-dot 指示点的类名

2.wx-swiper-dot-active 当前指示点的类名

有了这两个类名 改变颜色样式啥的就比较简单了

废话不多说 上代码

<template>
  <swiper circular="true" class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
      <block v-for="(item, index) in imgList" :key="index">
          <swiper-item>
              <image :src="item" class="slide-image" mode="aspectFill"/>
          </swiper-item>
      </block>
  </swiper> 
</template>
<script>
export default {
  data () {
    return {
      indicatorDots: true, // 是否显示面板指示点
      autoplay: true, // 是否自动切换
      interval: 5000, // 自动切换时间间隔
      duration: 500 // 滑动动画时长
    }
  },
  props: [imgList]
}
</script>
<style lang="scss" scoped>
.swiper {
  width: 690rpx !important;
  height: 270rpx !important;
  margin: 0 auto;
}
image {
  height: 100%;
  width: 100%;
}

// 指示点样式
.swiper /deep/ .wx-swiper-dot{ 
  height: 12rpx;
  width: 12rpx;
  background: rgba(255, 255, 255, .6)
  }
// 当前指示点样式
.swiper /deep/ .wx-swiper-dot-active{
    width: 36rpx;
    height: 12rpx;
    border-radius: 6rpx;
    background: rgba(255, 255, 255, .8)
}

</style>

.