Swiper do componente Applet - como modificar o estilo do ponto indicador do painel

No documento oficial, o ponto indicador do swiper é um círculo por padrão, e sua cor só pode ser modificada. Se você quiser modificar a forma, há duas ideias:

1. Oculte os pontos indicadores do painel oficial (as propriedades oficiais podem ser ocultadas) e reescreva os componentes com visualização (eu pessoalmente acho que isso é mais problemático, este artigo não explicará)

2. Descubra a classe que controla o ponto apontador no swiper e modifique seu estilo.

 

Como modificar o estilo do ponto indicador no segundo método?

Primeiro de tudo: Precisamos entender as classes que controlam os pontos de apontamento em vários swipers de classe 

1.wx-swiper-dot indica o nome da classe do ponto   

2.wx-swiper-dot-active O nome da classe do ponto de indicação atual  

Com esses dois nomes de classe, alterar o estilo de cor é relativamente simples  

Não muito absurdo, vá para o 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>

.