解决小程序swiper组件轮播指示点颜色设置“无效”的问题

前言

本文章写给在开发微信小程序过程中，使用swiper组件，按照文档设置了指示点自定义颜色却“无效”的同学。

内容

发现问题

首先我们看一下官方文档里面的文档描述

按照文档上面的描述，给swiper组件设置了indicator-dots属性为true，indicator-color属性为 rgba(255,255,255,1)，看看效果
咦？！怎么没有效果？文档里不是说indicator-color是指示点颜色吗？往下看 ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️

分析问题

1. 根据css的使用经验，我们设置的样式不对，很可能是设置到其它元素身上了；
2. 元素没有设置错的情况下，那就很可能是设置的属性不对或者不全；
3. 为了避免第二点导致的问题，那我们就把所有跟指示点有关的属性都设置上看一下效果。

解决问题

查看文档，发现还有一个属性跟指示点有关，那就是indicator-active-color（当前选中的指示点颜色），我们把这个属性设置成 rgba(255,255,255,1) 看看效果：

从修改后的效果图我们可以看到，我们想要的白色效果已经出来了。什么原因呢？我们继续往下看 ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️

当我们多增加两个swiper-item，效果就很明显了，indicator-active-color是当前轮播图指示点的颜色，indicator-color是非当前指示点的颜色，有时候轮播图只有一张，往往看不到效果。

总结

开发小程序的时候，如果要用到没有用过的组件或者属性，不知道各个属性有什么用的话，建议全部加上看看效果，然后选择有用的留下，去掉多余的属性即可。