vue实现卡片式上下滑动_基于Vue.js仿制探探卡片左右滑动特效

说明

> 最近一直在捣鼓Nuxt.js项目,项目中有个需求是实现类似探探左右滑动切换功能。要求能实现手指拖拽切换、点击按钮进行切换、拖拽回弹等功能。

如上图:最终展示效果

emmm~~ 是不是感觉还阔以。下面就来简单的讲解下实现过程。

布局

整体布局分为 顶部topbar、卡片滑动区、底部tabbar 三个部分。

遇见TA

侧边栏筛选框

点击右上角按钮,侧边会出现弹窗。范围滑块、switch开关、Rate评分等组件则是使用Vant组件库。

范围

{ {distanceVal}}

自动增加范围

性别

女生

好评度

{ {starVal}}星

你可能感兴趣的:(vue实现卡片式上下滑动)