手把手教你美化微信小程序中的轮播效果

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

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

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

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

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

1、改变颜色

其实改变颜色很简单，官方给我们提供了具体的参数：

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

<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!

总结

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