Vue|Nuxt.js仿探探卡片式左右拖拽|vue仿Tinder

开场

技术宅男对探探/陌陌并不陌生，一款专注于陌生人的社交App。里面的左右滑动翻牌子效果更是让人眼前一亮，似乎有一种古时君王选妃子的感觉。让人玩的爱不释手。

一睹风采

哈哈，效果还行吧。下面就简单的讲解下具体的实现方法。

页面布局

页面整体分为 顶部Navbar、卡片区域、底部Tabbar 三个部分。

侧边弹出框

点击筛选，在侧边会出现弹窗。其中范围滑块、switch开关、Rate评分等组件则是使用Vant组件库。

侧边弹窗模板

仿探探翻牌子

卡片区单独封装了一个组件flipcard，只需传入pages数据就可以。


在四周拖拽卡片会出现不同的斜切视角。

pages数据格式

module.exports = [
    {
        avatar: '/assets/img/avatar02.jpg',
        name: '放荡不羁爱自由',
        sex: 'female',
        age: 23,
        starsign: '天秤座',
        distance: '艺术/健身',
        photos: [...],
        sign: '交个朋友，非诚勿扰'
    },
    
    ...
]

flipcard组件模板

/**
 * @Desc     Vue仿探探|Tinder卡片滑动FlipCard
 * @Time     andy by 2020-10-06
 * @About    Q：282310962  wx：xy190310
 */

组件支持touch和mouse事件，在移动端和PC端均可滑动。

另外，点击卡片跳转到卡片详细页面。

好了，基于Vue实现探探卡片效果就分享到这里。希望能喜欢~~ ✍