小程序

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

文 / 倔强的巴顿 来源 / 原创 阅读 / 5490 2年前

最近公司开发了一款偏向社交类的小程序,然后我们逼(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: 小程序、代码片段或静态模板等,请忽略该注意事项。

44

评论

共6条评论
  • admin1111
    admin1111 1年前

    nice

  • 匿名
    匿名 1年前

    背面内容可以添加点击事件么?

  • 匿名
    匿名 1年前

    您好,您这个可以添加点击事件么?

  • 匿名
    匿名 1年前

    可以可以

  • 匿名
    匿名 1年前

    nice,效果很棒哎,感谢分享。

  • 游客
    游客 2年前

    骚气,相当骚气,,,

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

模板类型:

小程序

软件版本:

代码片段

评分等级:

推荐

下载地址:

立即获取

注意事项:

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

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

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

站点声明:本站转载作品版权归原作者及来源网站所有,原创内容作品版权归作者所有,任何内容转载、商业用途等均须联系原作者并注明来源。

© 2019 The Pride & Joy of an Artisan. · Designed By duoguyu · Powered By YzmCMS京ICP备19008479号-1
相关侵权、举报、投诉及建议等,请发E-mail:tonney@duoguyu.com

友情链接: YzmCMS 袁志蒙博客 坚果的世界 UXDtime 飞信网 追梦者 sjhv的杂货店 碧羽墨轩博客 薛定喵君 阿轩个人博客 RollApi 逸风之行个人博客 Hihuhu 简记 wen学习志

扫码体验小程序