类似Tinder
和探探
的卡片效果的组件,社区中已经非常多了。我这一版除了可以实现和他们一样的效果外。还增加了飞卡
的效果,就是类似我的女神邱淑贞这样。
可以将卡片朝任意拖拽方向飞出去,必须得帅
是不是!
下面来说说我的实现思路
绝对原创,如有雷同,纯属巧合
先叠起来
其实最早实现这个效果,我是在2018年的时候,在weex上实现过一版。原帖请看这里:https://zhuanlan.zhihu.com/p/37482853
咱们这次不要求在weex里可用,所以叠起来非常简单。
首先让三个卡片按照近大远小
的原则分别设置设置z-index
,宽和高,比如每一层卡片的宽和高比上一层卡片要缩小20个像素(还有一种做法是通过zoom或者scale来设置远处卡片的缩小级别)。然后加入绝对定位position:absolute
和z-index
就可以将卡片层叠起来了。
拖动第一张卡
因为只有第一张卡片可以拖动,所以我们只要监听第一张卡片的touchstart
,touchmo