javascript - 使用 Javascript 模仿 iOS 在选项卡之间滚动

标签 javascript jquery ios jquery-plugins jquery-slide-effects

<分区>


要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的,因为它们往往会吸引自以为是的答案和垃圾邮件。相反,describe the problem以及迄今为止为解决该问题所做的工作。

关闭 9 年前

我正在尝试找到一种方法或插件来复制 iOS 应用程序中的效果,您可以从左或右滑动,如果您在其中滑动足够多,则在抬起手指时它会锁定到下一个 Pane 方向。

如何让它知道您滚动到足够多的位置然后设置要关注的新位置?有没有适合这种事情的好的 jQuery 插件? jQuery Mobile 似乎没有这种功能。

我心目中的布局就像 4-5 个 DIVS 并排放置在一个 DIV 的内部,可能将过度滚动设置为隐藏。然后,当您开始滑到下一个 Pane 时,它会触发一个事件,该事件会通过一些过渡效果更改左/右 CSS 位置,然后还会更新选项卡以显示已选择新的新 Pane 。

最佳答案

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

  • 触摸启动时使用 JQueryEventType 对象来存储初始 XY 坐标,并设置一些参数来表示有效的滑动(可以说init=true)
  • 在 touchmove 上,首先检查是否是有效的滑动(if init==true), 然后再次使用 JQueryEventType 对象获取新的 XY 光标/手指的位置。

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

例如,如果delta X > 10(过滤错误的某个阈值)和delta Y ~ 0,则其向右移动。我会将所有 DIV 转换为 RIGHT delta X

我建议不要使用任何动画,因为它看起来不符合您的需要。另外,保持转换延迟非常短,并且可能没有计时功能。这会给运动带来一些清晰的 react 。

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

关于javascript - 使用 Javascript 模仿 iOS 在选项卡之间滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21734680/

相关文章:

ios - Xcode 5.0 卡住了 "Attaching to [MyApp]"

ios - 从 iOS 共享扩展打开应用程序

ios - 通过 xib 或 Storyboard将 subview 添加到 UICollectionViewCell 的 contentView

javascript - anchor 标记上的 onclick 事件在 IE 中有效,但在 Firefox 和 Chrome 中无效

jquery - 响应式列宽高尺寸

javascript - 一页 p5.js 上的两个 Canvas

javascript - jquery 切换 div 显示隐藏

jquery - 幻灯片切换 jQuery 函数

javascript - 正则表达式奇怪地不起作用

javascript - 如何使 HTML 框在悬停时滑动并使用 JS 或 CSS 显示其下方的文本