> 最近一直在捣鼓Nuxt.js项目，项目中有个需求是实现类似探探左右滑动切换功能。要求能实现手指拖拽切换、点击按钮进行切换、拖拽回弹等功能。
如上图：最终展示效果
emmm~~ 是不是感觉还阔以。下面就来简单的讲解下实现过程。
布局整体布局分为 顶部topbar、卡片滑动区、底部tabbar 三个部分。
遇见TA
侧边栏筛选框
点击右上角按钮，侧边会出现弹窗。范围滑块、switch开关、Rate评分等组件则是使用Vant组件库。
范围
{{distanceval}}
自动增加范围
性别
女生
好评度
{{starVal}}星
优先在线用户
优先新用户
更新
Vue仿陌陌堆叠卡片
其中卡片堆叠区单独封装了一个flipcard.vue组件，只需传入pages数据就可以。
``
在卡片的四周拖拽卡片，会出现不同程度的斜切视角。
pages支持传入的参数
module.exports = [
{
avatar: '/assets/img/avatar02.jpg',
name: '放荡不羁爱自由',
sex: 'female',
age: 23,
starsign: '天秤座',
distance: '艺术/健身',
photos: [...],
sign: '交个朋友，非诚勿扰'
},
...
]
堆叠卡片模板
-
{{item.name}}
{{item.distance}}
还有点击卡片会直接跳转到详情页。
ok，基于Vue.js实现卡片拖拽切换效果就分享到这里。希望能喜欢~~
最后附上一个Electron项目实例
Electron+Vue仿微信桌面端聊天实例|electron-vue聊天室
