javascript - 在KendoUI中如何模仿Gmail的 "Swipe to delete"？示例包括

Question

我正在尝试重新创建 Gmail(在 Android 上)的“滑动删除”界面。在此 GUI 中，用户可以

• 向左或向右滑动，整个列表项随拇指一起移动。
• 滑动超过 X 距离后，该项目会消失并被“撤消”图标取代
• 释放行，如果还没有达到X距离，应该将对象放在原来的位置。
• 如果滑动第二个项目，并且显示前一次滑动的撤消框，则该行将被删除，并且动画和逻辑从头开始。

我在这里有一个演示，但它的表现似乎不太好。 http://jsbin.com/EWUbeTI/2/edit

有没有更有效的方法来处理这个动画？

Answer 1

这个主要是关于定位和处理大量的触摸事件。有两个 div 彼此重叠。每个人都绝对有能力实现这一目标。

Top Div(电子邮件)当发生拖动时，顶部 div 通过拖动 delta 改变其左侧位置，如果该 delta 为负(向左移动)并且该行的当前左侧值不大于 0(防止向右拖动)。当拖动停止时，如果该行移动了容器宽度的至少 25%，我们假设用户想要提交，我们继续将其完全滑出。否则，我们将其左侧设置回零，然后将其设置为取消拖动的动画。

底部 Div(存档)底部的 div 不会移动，但会处理该区域的触摸。如果触摸发生在按钮上，则该项目会折叠(您也可以滑动)。平滑折叠需要您删除元素上的 padding kendo ui 移动设置。

http://jsbin.com/AfoQUKoQ/2/edit

注意:此实现非常特定于 iOS 7 皮肤，由于特定的 CSS 样式，无法与其他皮肤一起使用

希望这能让您朝着正确的方向前进。