用Javascript模拟Tabs之间的iOS滚动

Question

我试图找到一种方法或插件，可以复制iOS应用程序的效果，你可以从左或右滑动，如果你已经在这个方向上足够滑了，它就会锁定下一个面板。

如何让它知道，当你已经滚动足够多，然后设置新的立场，重点关注？这类事情有一个好的jQuery插件吗？jQuery移动似乎没有这种功能。

我所想到的布局就像4-5div在内部彼此相邻，一个DIV可能会被设置为隐藏。然后，当您开始滑到下一个窗格时，它可以触发一个事件，该事件更改具有某种转换效果的左/右CSS位置，然后更新选项卡以显示新窗格已被选中。

Answer 1

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

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

现在有一个棘手的部分:使用这些新的X和Y位置来计算位移和方向。使用这些值来设置DIV的偏移量或使用CSS3.0转换(x，y)。

例如，如果增量X> 10 (用于过滤错误的阈值)和增量Y~ 0，则其移动到右__。我会把我所有的DIVs翻译成delta __。

我建议不要使用任何动画，因为它看上去不符合你的需要。另外，转换延迟很短，而且可能没有计时功能。这会给你一些清晰的动作反应。

对于什么时候假定“它足够滑动”的问题， --我猜你将不得不用你选择的常量值或者用屏幕宽度来计算它。如果Delta X或delta Y不小于阈值保持值.反弹回来。如果它大于这个value...bounce向前。