小程序组件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>