微信小程序-swiper卡牌切换、左右滑动、翻牌效果。 / 小程序

2月前 阅读 / 394 来源 / 原创 文 / 倔强的巴顿

使用微信小程序组件-滑块视图容器Swiper及Css3的perspective、backface-visibility、transform属性实现卡牌左右切换、翻牌效果。

最近公司开发了一款偏向社交类的小程序,然后我们逼(sao)格(qi)特高的UI大神,在设计时,考虑到我们产品的特殊性,于是给每个上推荐的候选人设计了一种类似卡牌的交互效果。

但我们的功能实现还是比较简单的,只需要左右滑动切换卡牌,当前选中的卡牌适度放大突出显示,见下图。

微信小程序-swiper卡牌切换、左右滑动、翻牌效果。


具体实现效果,扫面下方小程序二维码查看(当前版本:v1.1.2):

微信小程序-swiper卡牌切换、左右滑动、翻牌效果。

微信扫一扫,查看《我想找对象》小程序



but,后续整理代码的时候,突发奇想,又增加了一点小特效,实现一个翻牌效果。

具体用途的话,或许可以作为一个电影海报、刮卡活动等小程序交互使用。比如:支付宝的集五福。


下面是主要使用的方法、api等。


滑块功能

    使用了微信小程序组件-滑块视图容器 Swiper (查看官方文档).

微信小程序-swiper卡牌切换、左右滑动、翻牌效果。


翻牌旋转效果

    使用了Css3的一些属性:perspectivebackface-visibilitytransform

perspective:3000rpx;  /*perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。*/
backface-visibility:hidden;  /*背对屏幕时隐藏*/
transform-style: preserve-3d;  /*子元素将保留其3D位置。*/
transform:rotateY(180deg);  /*定义沿着Y轴的3D旋转。*/

有想法的童鞋。可以参考《Css3实现翻牌效果》这个demo源码。


结合以上方法,最终实现效果如下

我写的一个小范例(视频有点大,如加载慢,请多等会)。


如,视频无法播放,可以参看以下截图:


微信小程序-swiper卡牌切换、左右滑动、翻牌效果。

微信小程序-swiper卡牌切换、左右滑动、翻牌效果。


源码Demo下载地址:见右侧下载链接



ps: 如源码Demo无法正常使用、改进意见、修改建议等,请评论留言,后续会不定期补充更新。


微信小程序-swiper卡牌切换、左右滑动、翻牌效果。
微信小程序-swiper卡牌切换、左右滑动、翻牌效果。

模版类型:

小程序

软件版本:

代码片段

评分等级:

推荐

下载地址:

立即获取

注意事项:

本站内分享的模版默认都是基于YzmCMS,详细安装方法见模版安装说明

如果下载的模版无法正常使用或报错,请至YzmCMS社区论坛寻求帮助,或者加入QQ群(161208398)谈论反馈问题。

ps: 小程序、代码片段或静态模版等,请忽略该注意事项。

8

评论列表
共3条评论
  • # 管理员 2019/06/12 13:33:53回复

    游客 : 骚气,相当骚气,,,

    管理员@游客低(guo)调(jiang).

  • # 游客 2019/06/12 11:45:44回复

    骚气,相当骚气,,,

  • # 游客 2019/05/31 10:47:34回复

    爱上大飒飒