仿探探左右滑动效果（兼容安卓，ios，小程序，h5）

运行条件

HBuilder X 3.7

安装后，从插件市场导入，即可真机运行

vue

项目地址

[github]( https://github.com/15157757001/cardDel ).

[uniapp插件市场]( https://ext.dcloud.net.cn/plugin?id=893 ).

说明

一些浏览器的原生事件会和touch事件冲突导致效果不佳。

插件设计: 插件不仅仅可以实现仿探探的效果，还能通过参数实现卡片不同的动画效果的变化。

基本模板里提供了简单的动画效果。

性能优化：尽量使用较小的图片

使用方式

**在index.js中** 

~~~

import clCardDel from "@/components/clCardDel/clCardDel"

mixins:[clCardDel]

~~~

| 参数 | 类型 | 默认值 | 说明 |

| --- | --- | --- | --- |

| number | Number | 2 | 存在的卡片数量 |

| moveRotate | Object | { x:0,y:0 } | 设置位移图片旋转角度距离  card中心点 - 指向坐标 |

| delMoveD | Number | screenHeight*2 | 删除移动距离 |

| touchMoveD | Number | 100 | card移动距离 card移动距离/touchMoveD = 其他card变化比率 |

| rotate | Number | 0 | 第2张卡片旋转角度 |

| scale | Object | { x:1,y:1 } | 第2张卡片缩放 |

| skew | Object | { x:0,y:0 } | 第2张卡片倾斜 |

| translate | Object | { x:0,y:0 } | 第2张卡片位移 |

| opacity | Number | 1 | 第2张卡片透明度 |

# 事件

| 事件名 | 说明 |

| ---  | --- |

| init | 设置初始参数 |

| getData | 获取数据 |

| moveJudge(x,y,ratio) | 触摸中判断 |

| endJudge(x,y) | 触摸结束判断 |

| _back | 执行回退动画 |

| _del | 执行删除动画 |

用户可以通过拖拽卡片，来将其移除。除此之外还添加了大量的交互式动画。

为了提升运行速度，采用了只生成两张卡片，并将其不断复用的方法。

当用户点击卡片式，记录此次的点击位置，并将这张卡片变小，产生按压的效果。

当用户拖拽卡片时，卡片会随着手指移动，并旋转。下方的卡片也会逐渐从透明度为0的状态显现出来。

当用户手指离开卡片时，判断是否要进行移除卡片 *** 作。如果需要，则根据卡片的方位移除该卡片，否则将卡片回归原位。

以下是移除卡片 *** 作，首先先将卡片移除屏幕，随后再将数据重新填充，回归原位，实现复用机制。

因为探探抓住了中国人含蓄、害羞的心理，不敢表达自己，在线下缺失认识陌生人的机会；在线上，用户没有暴露自己的担忧”。

而正是探探这种，让用户可以没有后顾之忧的认真挑选自己喜欢的人的玩法。截止至17年11月，探探拥有1.1注册用户，7200万用户通过审核，月活用户2000万，日活用户700万。

最近，有一款叫做“群暗恋”的小程序，悄然的在微信群中流行，好友群、班级群、校友群甚至是游戏群都在传播，让微信都弥漫出一股暧昧的味道。

---