微信小程序-类似探探的卡片拖拽切换

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

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

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

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

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

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

实现功能参考： 微信小碧困程序自定义组件实现图片单指拖动、双指缩放效果 有修改。

给图片加拖灶慧旁动事件，我们需要知道它什么时候被点击、被拖拽和拖拽结束。

通过修改imageView的margin-left和margin-top来改变图片的位置以实现图片的单指移动隐橡效果和所有 *** 作结束松手后的回d效果。

通过修改imageView的宽和高以实现图片放大缩小的效果。且需要同时修改其margin-left和margin-top使图片能以【两手指的中间点为原点】缩放。

Talk is cheap, show you the code.

接下来是交互事件

cropper组和槐团件唤橘明岩

cropper.js

cropper.json

cropper.wxml

cropper.wxcc

index.js

index.json

index.wxml

index.wxss

log.js

log.json

log.wxml

log.wxss

app.json

---