官方文档里，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:flex属性。。。（我也不知道为啥）
除非你想让指示点垂直排列，否则还是老老实实添加上display:flex。
然后第二个问题，虽然没有原来的display:flex属性，但是justify-content，align-items会默认为center，而且无法改（。。。）
然后我们在wx-swiper-dot里进行修改。设定宽度和高度，以及点之间的间距。
设为后你会发现原来的圆形变成了椭圆。。
如果你想要方形的指示点，如下图：
这时候，你可以尝试修改其伪类：before或者after
content设为空，background设好图片或者颜色，还能加边框。
然而，编译后你会发现没什么卵用。。。
为啥？content为空啊，指示点的“before”“after”里什么都没有，甚至不占任何页面空间，原先椭圆的样式当然不会变。
这个时候就可以动点小心思：flex布局，对伪类元素是有效的。
什么意思？就比如wx-swiper-dot和其伪类元素before、after，如果你设定wx-swiper-dot为弹性布局，before和after可看成其中的flex项目。
content为空也不要紧，有万能的flex-grow:1，自动放大或收缩。
所以相应的，我们可以设定wx-swiper-dot和wx-swiper-dot::before：
.swiper-box .wx-swiper-dot{
display: flex;
width:40rpx;
height: 10rpx;
margin-left: 20rpx;
}
.swiper-box .wx-swiper-dot::before{
content: '';
flex-grow: 1;
background:rgba(255,255,255,0.8);
border-radius: 8rpx
}
别忘了在wx-swiper-dot-active::before里增加选中某一图片的样式：
.swiper-box .wx-swiper-dot-active::before{
background:rgba(244,0,0,0.8);
}
注意，一定要加伪类，不然你会发现上色部分只有那圈椭圆。
ps：active::before元素颜色会和swiper组件属性indicator-active-color颜色会叠加。
此方法存在一定局限性，不是所有样式都能用此实现。因此，还要学会使用第一个种方法：用view模拟面板指示点
思路：
1.有几张图就有几个点，所以针对swiper-item的循环同样可以放在dots里。点之间存在顺序，即第一个点对应第一个图，第二个点对应第二个图，等等。
2.当点序等于图序时，修改点的样式为‘active’。获取图序的方法：可以通过bindchange函数里的e.detail.current来获取；获取点序的方法：dots循环里的index