微信小程序现在依然很火，相信大家有目共睹；所以作为前端开发者，掌握如何开发小程序，是一项必备技能了，你觉得呢？

相对于PC和H5开发，小程序坑很多，所以需要慢慢“踩”，被坑多了，路自然顺畅了，^_^。

今天主要想分享一个效果：轮播优化。这也是个坑，呵呵。我们看下官方提供DEMO效果，如下图：

这个效果看上去很丑，完全达不到设计师的设计效果，有些童鞋在官方文档里找了好久，却不知道怎么优化，因为官方的东西只是提供基础知识。

相信大家认真看完本次分享，后面可以随心所欲的美化修改了。接下来我提供一些方案给大家参考，GO GO GO!

1、改变颜色

其实改变颜色很简单，官方给我们提供了具体的参数：indicator-dotsBooleanfalse是否显示面板指示点

indicator-colorColorrgba(0, 0, 0, .3)指示点颜色

indicator-active-colorColor#000000当前选中的指示点颜色

然后我们可以通过参数去改变颜色值：

.....

JS代码：data{

indicatorColor:"#ff0", //默认颜色

indicatorActiveColor:"#00f"  //选中颜色

},

效果如下：

这个so easy，纯粹利用小程序原生的代码修改，去尝试下吧。

2、改变形状

此方法改进了方法1的局限性，不仅仅只是简单的修改显示的颜色，比如能改变形状，大小等等。具体思路如下：

禁用掉swiper的indicator-dots属性(即删掉)，然后用view组件模拟dots。

简单的说就是要重写一个小组件。废话少说，代码走起：

WXML代码：

说明：我们需要隐藏官方默认的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、数字+形状

有时候，会遇到比较刁钻的需求，比如产品要求在圆圈里加上数字，呵呵，有些童鞋就蒙蔽了。

其实不难，我们只要在原有基础上加点东西即可。

修改为{{index+1}}

接着，你就改改圆和里面文字的样式【自己操作，不懂加群咨询】即可。看下我改后的效果图：

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)，如下代码：

在JS里面我们设置下vertical为true，这时候滚动就是垂直的啦。效果图如下：

其实没了解过的话，觉得好难好难，无从下手，当你学习过了，发现原来如此，OH,OH,OH!

总结

常用的轮播滚动模式，基本就这些，其实还可以进一步的去研究，这个要看具体需求，先分享到这里吧，大家如有好方法或者不懂的可以加QQ群和关注公众号讨论。