修改小程序swiper 点的样式_小程序组件swiper-如何修改面板指示点样式

官方文档里，swiper的指示点默认是圆形，且只能修改其颜色。如果要修改形状，有两种思路：

1.隐藏官方的面板指示点(官方有提供属性可以隐藏)，自己用view重写组件

2.弄清swiper里控制指示点的类，并对其中样式进行修改。

我们先来第二种，从网上查阅资料可得(参考资料)，相关的类有：

wx-swiper-dots

wx-swiper-dots-horizontal

wx-swiper-dot

wx-swiper-dot-active

从现行版本的调试工具来看，无论你怎样修改这里的样式，都不能在wxml模块里展示出来。

所以，考验css基础的时候到了。

从网上的代码来看，层级关系为：

wx-swiper-dots=wx-swiper-dots-horizontal(为同一个元素的两个类)> wx-swiper-dot

当然这只是个人推测，自己重写css时最好直接写这些类名，而不要用那些复杂的选择器。

注意：实际写的时候一定要给swiper定义一个类，比如swiper-box，然后css格式就成为了：

.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal{…}

.swiper-box

.wx-swiper-dot{…}

目前发现直接写类名修改css样式，不起任何作用。

首先第一个问题，就是在swiper-box下的 wx-swiper-dots-horizontal，会失去原来的display: