官方文档里，swiper的指示点默认是圆形，且只能修改其颜色。如果要修改形状，有两种思路：
1.隐藏官方的面板指示点（官方有提供属性可以隐藏），自己用view重写组件 (个人觉得这个比较麻烦 此篇文章不做讲解)
2.弄清swiper里控制指示点的类，并对其中样式进行修改。
第二种方法怎么修改指示点样式呢？
首先 ： 我们需要了解几个classswiper里控制指示点的类
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>
.
