使用Javascript模仿Tabs之间的iOS滚动

Question

我正在尝试找到一种方法或插件，可以在iOS应用中复制效果，您可以从左侧或右侧滑动，如果您滑入手指，它会在抬起手指时锁定到下一个窗格方向。

如何知道何时滚动得足够多，然后将新位置设置为关注？这种东西有一个很好的jQuery插件吗？ jQuery Mobile似乎没有这种功能。

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

Answer 1

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

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

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

例如，如果 delta X＆gt; 10 （一些阈值来过滤错误）和 delta Y~0 然后它移动到右。我会通过 delta X 将我的所有DIV翻译成右边。

我建议不要使用任何动画，因为它不会根据你的需要来看。另外，保持转换延迟非常短，可能没有定时功能。这将为运动提供一些清晰的反应。

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