Componente de applet swiper: cómo modificar el estilo del punto indicador del panel

En el documento oficial, el punto indicador del swiper es un círculo por defecto, y su color solo se puede modificar. Si quieres modificar la forma, hay dos ideas:

1. Oculte los puntos indicadores oficiales del panel (las propiedades oficiales se pueden ocultar) y reescriba los componentes con vista (personalmente creo que esto es más problemático, este artículo no lo explicará)

2. Descubra la clase que controla el punto señalador en Swiper y modifique su estilo.

 

¿Cómo modificar el estilo del punto indicador en el segundo método?

En primer lugar: necesitamos entender las clases que controlan los puntos señaladores en varios swipers de clase 

1.wx-swiper-dot indica el nombre de clase del punto   

2.wx-swiper-dot-active El nombre de clase del punto de indicación actual  

Con estos dos nombres de clase, cambiar el estilo de color es relativamente simple.  

No hay muchas tonterías, ve al código.

<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>

.