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

说明

> 最近一直在捣鼓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.age}}

{{item.starsign}}

{{item.distance}}

/**

* @Desc Vue仿探探|Tinder卡片滑动FlipCard

* @Time andy by 2020-10-06

* @About Q：282310962 wx：xy190310

还有点击卡片会直接跳转到详情页。

ok，基于Vue.js实现卡片拖拽切换效果就分享到这里。希望能喜欢~~

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

vue里面怎么删除部分页面_基于VUE选择上传图片并页面显示（图片可删除）
基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下 demo例子: 依赖文件: HTML文本内容: 相关照片 JS文本内容: /** * 从 file 域获取本地图片 url */ fun ...
vue 微信公众号支付接口_基于vue的h5项目之支付宝支付与微信支付
本文仅记录基于vue开发h5项目过程中使用支付宝和微信支付过程中的重点与槽点,仅为前端部分,如有疏漏不正之处,请于文末评论探讨.注意:标红部分灰常重要,仔细阅读官方文档非常重要,耐心非常重要,细心非常 ...
vue和Java做数据交互_基于vue和springmvc前后端分离，json类接口调用介绍
基于vue和springmvc前后端分离,json类接口调用介绍版本要求:spring-3.2.9.RELEASE.vue-2.9.2.axios-0.17.1,其中axios作为http clie ...
基于vue的响应式ui框架_基于Vue.js的响应式和可配置UI框架
基于vue的响应式ui框架 Framevuerk (Framevuerk) Fast, Responsive, Multi Language, Both Direction Support and C ...
vue可视化拖拽组件模板_基于 Vue 丝滑般拖拽排序组件VueSlicksort
今天给大家分享一个功能超强的自由拖拽排序组件VueSlicksort. vue-slicksort 一款功能强大的可拖拽的vue.js组件.拥有丝滑般拖拽动画效果,支持水平/垂直/网格拖拽排序.还可以 ...
vue实现留言板的功能_基于vue和bootstrap实现简单留言板功能
本文实例为大家分享了vue实现简单留言板功能的具体代码,供大家参考,具体内容如下作为一个刚开始接触vue的前端小白,我想在这里记录一些学习过程,希望和大家一起进步,如有不妥处之处,请多多指教呦. 今 ...
vue 实现文本的拖拽_基于Vue实现拖拽功能
本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下效果图: HTML代码: 位置 x:{{val.x}} y:{{val.y}} //注意这里要通过指令绑定函数将当前元素的位 ...
vue实现搜索框搜索新增_基于Vue el-autocomplete 实现类似百度搜索框功能_含真_前端开发者...
效果图如下所示: 首先上代码让数据触手可及 class="inline-input search-input" v-model="searchContent" ...
vue实现搜索框搜索新增_基于Vue.js实现简单搜索框
主要用到的知识很简单,简单的vuejs2.0的知识就够了.源码用了.vue构建和ES6,用了webpack打包等等.我资历还浅,先用一个简单的.js的写. 先看效果这里有两个组件,一个组件是logo ...

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

{{item.name}}

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

最新文章

热门文章