微信小程序 swiper组件 修改指示器圆点的样式位置等

• 前言

  微信小程序的swiper组件，官方文档没有给具体的配置接口，有时我们需要一些个性化的样式，看到某位大佬曾在 开放工具中看到了小圆点的class类名，现在似乎是看不到了，不过类名还可以使用

  附上原文地址 http://www.qianduan8.com/1009.html

• 解决方案

  • 一种是隐藏官方的指示点即把 indicator-dots=“{{false}}”传入swiper组件，自己写小圆点指示器的样式，然后通过 bindchange 监听swiper变化，动态更新小圆点样式

  • 一种就是用原生小圆点的类名，更改样式来实现

    原生类名介绍：

    .wx-swiper-dots 是小圆点指示器的父容器

    .wx-swiper-dot 是圆点指示器一个点的样式

    所以只需要重写 上述两个类名的样式，就可以做简单控制了

    还有一点 关于swiper横向与纵向 小圆点指示器的类名是不一样的

    .wx-swiper-dots-horizontal 表示横向（因为默认是横向的，所以可以直接用.wx-swiper-dots控制横向swiper的修改）

    .wx-swiper-dots-vertical 表示纵向