Android仿探探卡片拖拽,Vue 仿探探拖拽卡片的效果

原标题:Vue 仿探探拖拽卡片的效果

已更新Vue3版,请给前端大全发送关键字vue3仿探探获取Vue3版

类似 Tinder 和 探探 的卡片效果的组件,社区中已经非常多了。我这一版除了可以实现和他们一样的效果外。还增加了 飞卡 的效果,就是类似我的女神邱淑贞这样。

可以将卡片朝任意拖拽方向飞出去,必须得 帅 是不是!

下面带大家一步步来实现这个效果

先叠起来

咱们这次不要求在weex里可用,所以叠起来非常简单。

首先让三个卡片按照 近大远小 的原则分别设置设置 z-index ,宽和高,比如每一层卡片的宽和高比上一层卡片要缩小20个像素(还有一种做法是通过zoom或者scale来设置远处卡片的缩小级别)。然后加入绝对定位 position:absolute 和 z-index 就可以将卡片层叠起来了。

8a9c64fd10eecdd4c5663188fea1bfe8.gif

拖动第一张卡

因为只有第一张卡片可以拖动,所以我们只要监听第一张卡片的拖动事件。比如 touchstart , touchmove , touchcancel , touchend 。

2adeae17287f42afb1347536b21e0d3d.gif

拖动的时候需要注意,在 touchstart 的时候记录一下手指按下的位置,在 touchmove 时要减去这个位置,看上去就是点哪儿从哪儿拖。

touchStart: function( e){

varcurTouch=e.touches[ 0];

this.startLeft=curTouch.clientX- this.left;

this.startTop=curTouch.clientY- this.top;

}

touchMove: function( e){

varcurTouch=e.touches[ 0];

this.left=curTouch.clientX- this.startLeft;

this.top=curTouch.clientY- this.startTop;

}

飞出去

b7701bb12abe009a04e0ab8c2f092605.gif

要实现超任意拖拽方向飞出去这个效果,需要用到一些数学公式。

计算卡片当前拖拽的坐标和起始坐标的夹角

varangle= Math.atan2((当前坐标.y-起点坐标.y), (当前坐标.x-起点坐标.x));

飞出去的落点 x 轴坐标通过计算angle的余弦值再乘以力度得出

this.left= Math.cos(angle)* this.throwDistance;

飞出去的落点 y 轴坐标通过计算angle的正弦值再乘以力度得出

this.top= Math.sin(angle)* this.throwDistance;

这里咱们做得再完善一些,在拖动结束时去判断一下当前拖动的距离是否足够触发飞卡效果。如果不触发飞卡效果,则触发回位效果。这样的话也可以防止用户误操作。

312c79767ee6ad5d4d0de92d361883b2.gif

//计算两点之间的直线距离

getDistance: function( x1, y1, x2, y2){

var_x = Math.abs(x1 - x2);

var_y = Math.abs(y1 - y2);

returnMath.sqrt(_x * _x + _y * _y);

}

vardistance= this.getDistance( 0, 0, this.left, this.top);

if(distance> this.throwTriggerDistance){

this.makeCardThrow;

} else{

this.makeCardBack;

}

下层的卡片上推

上推其实很简单,一开始的时候,我就定义了四张( 不是3张吗?怎么变4张了 )卡片的大小和位置。

当第一张卡飞出去后

第2张卡片变更为原本第1张卡片的位置和大小

this.width2=

this.cardWidth;

this.height2= this.cardHeight;

this.left2= 0;

this.top2= 0;

第3张卡片变更为原本第2张卡片的位置和大小

this.width3=(

this.cardWidth-

this.leftPad*

2);

this.height3=( this.cardHeight- this.topPad* 2);

this.left3= this.leftPad;

this.top3=( this.topPad* 3);

第4张卡片原本是透明的,现在变为第3张卡片的位置和大小

this.width4=(

this.cardWidth-

this.leftPad*

4);

this.height4=( this.cardHeight- this.topPad* 4);

this.left4= this.leftPad* 2;

this.top4=( this.topPad* 6);

this.opacity4= 1;

我把阴影效果先去掉,大家观察一下这个细节

2abb20728cdf6ccf0e4c2ca9deeba2c9.gif

重置所有卡片

底层的卡片上推和第一张卡片的飞出效果是同时进行的,由css的 transition 来控制。不过时间是我们设定好的,所以只要在上推和飞出的动画时间结束后,我们重置一下所有4张卡片的大小和位置即可。

08f8bc52ffd8bdbcb5f4ffa7c95c07ee.png

this.onThrowStart;

setTimeout( function( ){

that.isThrow= false;

that.isAnimating= false;

that.onThrowDone;

that.resetAllCard;

}, 400);

这里需要注意,所有四张卡片都需要 瞬间 完成重置,所以这步之前应该禁用掉transition动画。

组件化

为了适应各种使用场景,我们要将这个效果封装一下。

//提供几个事件,分别是拖动时,拖动结束,飞卡结束,飞卡失败(回位)

@onDragMove= 'onCardDragMove'

@onDragStop= 'onCardDragStop'

@onThrowDone= 'onCardThrowDone'

@onThrowFail= 'onCardThrowFail'

//参数就不细说了,都能看明白

:cardWidth= "200"

:cardHeight= "200"

cardBgColor= "#fff"

:leftPad= "10"

:topPad= "6"

:borderRadius= "8"

:throwTriggerDistance= "100"

dragDirection= "all"

:hasShadow= "false"

:hasBorder= "true"

提供三个slot,你可以非常方便的往卡片里塞内容

//firstCard,secondCard,thirdCard

< /slot>

现在来模仿几个效果 某乎的推荐回答 @onDragMove= 'onCardDragMove'

@onDragStop= 'onCardDragStop'

@onThrowDone= 'onCardThrowDone'

:cardWidth= "300"

:cardHeight= "120"

:throwTriggerDistance= "100"

dragDirection= "horizontal"

:hasShadow= "true"

仅允许水平拖动

32a056f9b7d1a5431d18f7c31f50b7a0.gif

由于改变宽高会导致文字换行变化,也许卡片用缩放的话,用户体验会更好一些吧

探探的效果

实现探探效果的核心是监听卡片拖动的位置

onCardDragMove(obj){

if(obj.left< -10){

this.actionName= "不喜欢";

} elseif(obj.left> 10){

this.actionName= "喜欢";

} else{

this.actionName= "";

}

}

26ac2c9cab164975b9a220d7d11672f1.gif

源码仓库

https://github.com/ezshine/ezflycard

已更新Vue3版,请给 前端大全 发送关键字 vue3仿探探获取Vue3版 返回搜狐,查看更多

责任编辑:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/431711.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Codeforce 水题报告(2)

又水了一发Codeforce &#xff0c;这次继续发发题解顺便给自己PKUSC攒攒人品吧 CodeForces 438C&#xff1a;The Child and Polygon: 描述&#xff1a;给出一个多边形&#xff0c;求三角剖分的方案数&#xff08;n<200&#xff09;。 首先很明显可能是区间dp&#xff0c;我们…

itextpdf 怎么下划线_itext生成pdf设置下划线,itextpdf下划线,使用setUnderli

itext生成pdf设置下划线&#xff0c;itextpdf下划线,使用setUnderli使用setUnderline设置iText对象下划线显示我们可以使用setUnderline(float thickness, float yPosition)方法设置一个iText的Chunk对象下划线的显示样式。setUnderline方法的参数介绍&#xff1a;public Chunk…

textureview 旋转90度后平铺_C++初级编程NOIP题:11H1537: 图像旋转

时间限制: 1 Sec 内存限制: 128 MB题目描述输入一个n行m列的黑白图像&#xff0c;将它顺时针旋转90度后输出。输入第一行包含两个整数n和m&#xff0c;表示图像包含像素点的行数和列数。1 < n < 100&#xff0c;1 < m < 100。接下来n行&#xff0c;每行m个整数&…

android录音权限被占用,请问,app被用户禁止拍照和录音权限之后,拍照和录音事件应该怎么处理?...

另外android权限判断在6.0下没法直接判断然后通过代码设置&#xff0c;建议还是通过异常错误判断然后提示一下用户去手动修改权限。判断权限是否存在打开权限设置var r null;mui.plusReady(function () {document.querySelector(#btn1).addEventListener(tap,function () {r …

太阳粒子是什么东西_太阳粒子流是什么

匿名用户1级2011-06-21 回答因能量的增加而使得自身活动加强&#xff0c;从而向广袤的空间释放出大量带电粒子所形成的高速粒子流&#xff0c;科学家把这一现象比喻为太阳打“喷嚏”。由于太阳风中的气团主要内容是带电等离子体&#xff0c;并以每小时 150 万到 300 万公里的速…

qt中的qwidget如何实现自定义部件_2.3信号和槽(中)

2.3.1 在ui中编辑信号槽这一小节我们来看一下如何在ui中编辑信号槽。我们想要在ui中实现点击按钮&#xff0c;能够控制进度条的显隐。新建GUI项目SignalsAndSlots2&#xff0c;类名SignalsAndSlots2&#xff0c;基类选择QWidget。打开ui文件。在编辑界面中拖入一个Progress Bar…

html中 一条样式规则,css规则的基本格式是什么?

CSS(Cascading Styel Sheet)是控制 Web 页面外观的一系列格式设置规则,是网页设计必不可少的工具之一。下面我们就开始学习css的基本语法格式。css规则的基本格式是什么&#xff1f;层叠样式表是一个完全的纯文本文件&#xff0c;通常以“css”为扩展名作为单独的文件来使用…

css transtion不生效_CSS中transition属性不起作用的原因及解决方法

CSS中的transition属性可用于调整元素更改的时间&#xff0c;它可以像动画一样显示。虽然transition属性可以很方便的实现过渡效果&#xff0c;但是有时候可能会出现无效的情况&#xff0c;所以我们就需要来理解transition属性的写法规则。我们先来看一下CSS中transition属性不…

三白话经典算法系列 Shell排序实现

山是包插入的精髓排序排序&#xff0c;这种方法&#xff0c;也被称为窄增量排序。因为DL&#xff0e;Shell至1959提出命名。该方法的基本思想是&#xff1a;先将整个待排元素序列切割成若干个子序列&#xff08;由相隔某个“增量”的元素组成的&#xff09;分别进行直接插入排序…

python清空列表_Python之列表

Python变量没有数据类型&#xff0c;所以Python没有数组。整数&#xff1b;浮点数&#xff1b;字符串&#xff1b;对象创建一个列表&#xff1a;1.member[大鱼,123,3.14,[1,2,3]]2.empty[]向列表添加元素&#xff1a;append&#xff08;&#xff09;&#xff1a;member[大鱼,12…

java切面1.6需要的包_Java技术 AspectJ

AspectJ1 简介AspectJ&#xff1a;Java社区里最完整最流行的AOP框架。在Spring2.0以上版本中&#xff0c;可以使用基于AspectJ注解或基于XML配置的AOP。2 在Spring中启用AspectJ注解支持导入JAR包springsource.net.sf.cglib-2.2.0.jarspringsource.org.aopalliance-1.0.0.jarsp…

华为什么时候更新鸿蒙os,华为鸿蒙系统升级时间表

华为鸿蒙系统升级时间表6月2日HUAWEI Mate 40 ProHUAWEI P40 ProHUAWEI Mate 40 ProHUAWEI Mate 30 ProHUAWEI Mate 40 RS保时捷设计HUAWEI Mate 30 Pro 5GHUAWEI Mate 40HUAWEI Mate 30E Pro 5GHUAWEI Mate 40EHUAWEI Mate 30 RS保时捷设计HUAWEI Mate 2HUAWEI Mate 30HUAWEI …

vsftpd安装问题汇总(持续更新。。)

问题1. 在执行make命令时却出现了问题&#xff0c;具体如下&#xff1a; sysdeputil.o: In function vsf_sysdep_check_auth: sysdeputil.c:(.text0x109): undefined reference to crypt sysdeputil.c:(.text0x13a): undefined reference to crypt collect2: ld 返回 1 make: *…

python游戏程序编码_python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)...

最近研究了下迷宫的生成算法&#xff0c;然后做了个简单的在线迷宫游戏。游戏地址和对应的开源项目地址可以通过上面的链接找到。开源项目中没有包含服务端的代码&#xff0c;因为服务端的代码实在太简单了。下面将简单的介绍下随机迷宫的生成算法。一旦理解后你会发现这个算法…

cesium等高线_Cesium专栏-气象站点色斑图、等值线图(不提供源码)

Cesium 是一款面向三维地球和地图的&#xff0c;世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包&#xff0c;方便用户快速搭建一款零插件的虚拟地球Web应用&#xff0c;并在性能&#xff0c;精度&#xff0c;渲染质量以及多平台&#xff0c;易用性上都有高质…

为什么OC语言很难

作为一个Objective-C的coder&#xff0c;我总能听到一部分人在这门语言上抱怨有很多问题。他们总在想快速学习这门语言来写一个App出来&#xff0c;但他们也总是联想到Objective-C看上去实在太难了或者在想这些语法符号都是神马玩意&#xff1f;不错&#xff0c;他们问得非常好…

小狐狸ChatGPT付费创作系统小程序端开发工具提示打开显示无法打开页面解决办法

最新版2.6.7版下载&#xff1a;https://download.csdn.net/download/mo3408/88656497 很多会员在上传小程序前端时经常出现首页无法打开的情况&#xff0c;错误提示无法打开该页面&#xff0c;不支持打开&#xff0c;这种问题其实就是权限问题&#xff0c;页面是通过调用web-v…

http status 404 – 未找到_从零开始搭建自己的网站004添加404处理页面

在将web-war上传到服务器并重启tomcat后&#xff0c;发现找不到login页面目录结构&#xff1a;add exception do wth page2.添加页面内容&#xff1b;到w404.jsp异常处理&#xff0c;404首页 Home (current) Link Dropdown Action Another action Disabled Search 百度百科&am…

dw怎么打开html模板,Dreamweaver中如何使用模板

随着Internet的普及&#xff0c;很多人已经不满足于仅仅上网冲浪&#xff0c;而希望深入地参与其中。现在&#xff0c;拥有自己的Web网站已经成为一种潮流。虽然制作一个简单的网页并不困难&#xff0c;但是制作出超凡脱俗的网站就不那么容易了。下面是小编为大家带来的关于Dre…

云计算的认识和看法_云存储已经成为存储的未来,你的存储跟上节奏了吗?

云计算是目前业界最关注的话题&#xff0c;其实云计算让很多人云里雾里。而云存储则是存储的未来。云存储这个概念的出现&#xff0c;在一定程度上改变了我们对于传统存储模式的看法。但是云存储想必让很多人迷惑&#xff0c;今天我们就来聊聊云存储的那些事儿。对于一些计算机…