0

我正在尝试找到一种方法或插件来复制 iOS App 中的效果，您可以在其中从左侧或右侧滑动，如果您在该方向上滑动足够多，当您抬起手指时，它将锁定到下一个窗格。

如何让它知道您何时滚动足够多，然后将新位置设置为关注？这种事情有好的jQuery插件吗？jQuery Mobile 似乎没有这种功能。

我想到的布局就像是 4-5 个 DIVS 在一个单独的 DIV 内侧并排，可能过度滚动设置为隐藏。然后，当您开始滑到下一个窗格时，它可以触发一个事件，该事件会通过一些过渡效果更改左/右 CSS 位置，然后还更新选项卡以显示选择了新的新窗格。

4

1 回答 1

1

为此，您应该使用touchstart/mousedown、touchmove/mousemove 和 touchend/mouseup事件来支持触控和桌面设备。

  • 在 touchstart 上，使用 JQueryEventType 对象来存储初始X和Y坐标，并设置一些参数来表示有效的滑动（比如说init=true）
  • 在 touchmove 上，首先检查其是否有效滑动（如果 init==true），然后再次使用 JQueryEventType 对象获取光标/手指的新X和Y 位置。

现在是棘手的部分：使用这些新的 X 和 Y位置来计算位移和方向。使用这些值来设置 DIV(s) 的偏移量或使用 CSS 3.0 translate(x,y)。

例如，如果delta X > 10（过滤错误的某个阈值）和delta Y ~ 0那么它向右移动。我会通过delta X将我所有的 DIV 翻译成 RIGHT 。

我建议不要使用任何动画，因为它看起来不符合您的需要。加上保持过渡延迟非常短，可能没有计时功能。这会给运动带来一些清晰的反应。

对于何时假设“滑动足够”的问题，我想您将不得不采用您选择的恒定值或使用屏幕宽度计算它。如果 Delta X 或 Delta Y 不小于阈值保持值...反弹。如果它大于这个值...向前反弹。

于 2014-02-12T17:49:19.350 回答