android 仿京东底部gif导航栏_Nuxt/Vue丝滑卡片式滑动｜Vue仿探探卡片效果

最近在开发Nuxt项目，有个需求是实现类似探探左右滑动切换卡片功能。经过反复调试，最终实现了这个效果。

页面整体布局分为 顶部导航条、卡片滑动区、底部Tabbar 三个模块。

为了规范页面代码，其中卡片滑动区域单独抽离了一个组件flipcard.vue。

下面就讲解下卡片滑动页面实现方法。

• 整体模板

遇见TA

项目中顶部导航栏/底部Tabbar组件，这里不作过多介绍，之前有一篇分享文章，感兴趣的可以看下。

基于Nuxt/Vue自定义Topbar+Tabbar

• 侧边栏弹出框

侧边弹出层使用的是VPopup组件实现。其中范围滑块、switch、star等组件使用的是Vant组件库。

范围{{distanceVal}}

自动增加范围

性别女生

好评度{{starVal}}星

优先在线用户

优先新用户

更新

• 仿探探卡片滑块

滑动卡片封装成了一个flipcard.vue组件。只需传入pages数据即可。支持左右拖拽滑动、滑动回弹动画、点击按钮切换等功能。

pages支持传入的JSON数据格式。

{avatar: 'assets/img/avatar.jpg',name: '甜甜圈',sex: 'female',age: 21,starsign: '双鱼座',distance: '800米',// 照片集photos: [...],// 签名sign: 'life is like a play 人生如戏。'},

新建flipcard.vue页面

{{item.name}}

{{item.age}} {{item.starsign}}

{{item.distance}}

组件中分别实现了touch和mouse事件，支持移动端和PC端滑动。

另外，点击卡片可以跳转到卡片详情页面。

okay，代码中都有一些备注，这里不作详细讲解了。有兴趣的可以去试一试哈~~

今天就分享到这里。希望对大家有所帮助！