×

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

作者:admin2019.03.21来源:Web前端之家浏览:715评论:1
微信公众号

微信公众号

500.jpg

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

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

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

image.png

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

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

1、改变颜色

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

indicator-dotsBooleanfalse是否显示面板指示点
indicator-colorColorrgba(0, 0, 0, .3)指示点颜色
indicator-active-colorColor#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"  //选中颜色
},

效果如下:

image.png

这个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;
}

效果如下:

image.png

很明显我们把圆点变大了。

有些童鞋问了,如果我们想改变圆点的形状,改成长方形的,怎么搞?So easy,你直接修改CSS样式【自己操作,不懂加群咨询】就可以了,这个我就不多说了,效果如下:

image.png

3、数字+形状

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

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

<view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>

修改为

<view class="dot{{index == currentSwiper ? ' active' : ''}}">{{index+1}}</view>

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

image.png

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,这时候滚动就是垂直的啦。效果图如下:

image.png

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

总结

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

温馨提示:本文作者系admin ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/xiaochengxu9239423-942934.html

网友评论文明上网理性发言 已有1人参与

发表评论:

评论列表

最新留言

  • www.micai18.com

    写的很详细...

  • 子午物联网

    这个博客,由衷的喜欢...

  • 访客

    文章不错,非常喜欢...

  • cnwebe

    新媒体运营交换友情链接https://www.cnwebe.com换吗...

  • admin

    请加上链接...

  • admin

    已加上...

  • 物联网应用

    交换个链接如何?物联网应用www.ziwuiot.com...

  • zzzmh

    你好自己写的个人技术博客https://zzzmh.cn麻烦友链申请...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2019 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero