微信小程序现在依然很火，相信大家有目共睹；所以作为前端开发者，掌握如何开发小程序，是一项必备技能了，你觉得呢？
相对于PC和H5开发，小程序坑很多，所以需要慢慢“踩”，被坑多了，路自然顺畅了，^_^。
今天主要想分享一个效果：轮播优化。这也是个坑，呵呵。我们看下官方提供DEMO效果，如下图：
这个效果看上去很丑，完全达不到设计师的设计效果，有些童鞋在官方文档里找了好久，却不知道怎么优化，因为官方的东西只是提供基础知识。
相信大家认真看完本次分享，后面可以随心所欲的美化修改了。接下来我提供一些方案给大家参考，GO GO GO!
1、改变颜色
其实改变颜色很简单，官方给我们提供了具体的参数：
| indicator-dots | Boolean | false | 是否显示面板指示点 | |
| indicator-color | Color | rgba(0, 0, 0, .3) | 指示点颜色 | |
| indicator-active-color | Color | #000000 | 当前选中的指示点颜色 |
然后我们可以通过参数去改变颜色值：
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{indicatorActiveColor}}">
.....
</swiper>
JS代码：
data{
indicatorColor:"#ff0", //默认颜色
indicatorActiveColor:"#00f" //选中颜色
},
效果如下：
这个so easy，纯粹利用小程序原生的代码修改，去尝试下吧。
2、改变形状
此方法改进了方法1的局限性，不仅仅只是简单的修改显示的颜色，比如能改变形状，大小等等。具体思路如下：
禁用掉swiper的indicator-dots属性（即删掉)，然后用view组件模拟dots。
简单的说就是要重写一个小组件。废话少说，代码走起：
WXML代码：
<view class="page-section page-section-spacing swiper">
<swiper class="swipers" autoplay="{{autoplay}}" current="{{currentSwiper}}" bindchange="swiperChange">
<block wx:for="{{background}}" wx:key="*this">
<swiper-item>
<view class="swiper-item {{item}}"></view>
</swiper-item>
</block>
</swiper>
<!--重置小圆点的样式 -->
<view class="dots">
<block wx:for="{{background}}" wx:key="*this">
<view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
</block>
</view>
</view>
说明：我们需要隐藏官方默认的dot组件。
JS代码：
data{
currentSwiper: 0,
},
swiperChange: function (e) {
this.setData({
currentSwiper: e.detAIl.current
})
},
CSS代码：
/*用来包裹所有的小圆点 */
.dots{
width: 240rpx; height: 36rpx; display: flex; flex-direction: row; position: absolute; left: 300rpx; bottom: 70rpx;
}
/*未选中时的小圆点样式 */
.dot{
width: 40rpx; height: 40rpx; border-radius:40rpx; margin-right: 26rpx; background-color: #ff0;
}
/*选中以后的小圆点样式 */
.active{
width: 40rpx; height: 40rpx; background-color: #00f;
}
效果如下：
很明显我们把圆点变大了。
有些童鞋问了，如果我们想改变圆点的形状，改成长方形的，怎么搞？So easy，你直接修改CSS样式【自己操作，不懂加群咨询】就可以了，这个我就不多说了，效果如下：
3、数字+形状
有时候，会遇到比较刁钻的需求，比如产品要求在圆圈里加上数字，呵呵，有些童鞋就蒙蔽了。
其实不难，我们只要在原有基础上加点东西即可。
<view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
修改为
<view class="dot{{index == currentSwiper ? ' active' : ''}}">{{index+1}}</view>
接着，你就改改圆和里面文字的样式【自己操作，不懂加群咨询】即可。看下我改后的效果图：
OH，God！就这么简单，哈哈。
4、垂直滚动
上面三种应用是水平滚动，如果我想垂直滚动呢，接着学习吧。
我们可以在方法3上做一些改动即可，比如我需要把dot通过CSS改变位置，如下：
/*用来包裹所有的小圆点 */
.dots{
width: 180rpx; height: 36rpx; display: flex; flex-direction: column; position: absolute; right:-30rpx; bottom: 200rpx;
}
/*未选中时的小圆点样式 */
.dot{
width: 32rpx; height: 32rpx; margin-bottom: 20rpx; background-color: yellow; border-radius: 50%; color: red; font-size: 26rpx; line-height: 32rpx; text-align: center;
}
/*选中以后的小圆点样式 */
.active{
width: 32rpx; height: 32rpx; background-color: #00f; color: white;
}
然后在swiper上加一个属性（vertical），如下代码：
<swiper class="swipers" autoplay="{{autoplay}}" current="{{currentSwiper}}" bindchange="swiperChange" vertical="{{vertical}}">
在JS里面我们设置下vertical为true，这时候滚动就是垂直的啦。效果图如下：
其实没了解过的话，觉得好难好难，无从下手，当你学习过了，发现原来如此，OH,OH,OH!
总结
常用的轮播滚动模式，基本就这些，其实还可以进一步的去研究，这个要看具体需求，先分享到这里吧
