android 卡片层叠滑动_Vue|Nuxt仿探探层叠卡片|vue卡牌滑动

397eebabb0507416519a3a75d7ebec1e.gif

最近一直在捣鼓NuxtJs项目,有个需求是实现类似探探卡片切换效果。实现左滑unlike | 右滑like、点击按钮能左右切换及拖拽距离不足有回弹动画等功能。

如上图:最终实现效果就是这样。哈哈,效果还行吧!

下面就来简单讲解下实现过程,如果是感兴趣的话可以接着往下看下哈!

整体布局

卡片页面整体分为 顶部导航、卡片层叠区、底部标签栏 三个部分。

android 卡片层叠滑动_Vue|Nuxt仿探探层叠卡片|vue卡牌滑动_第1张图片