1

我试图在一个网络应用程序上执行这种操作，它由一个“马赛克”视图组成，总共 6 列视图，共 6 行。导航在桌面浏览器上运行良好，但使用 Mobile Safari 时会变得很困难。

这是我想要采取的行动：

用户滑动（快速）-> 页面移动 1 个视图上/下/左/右
用户触摸和拖动 -> 页面跟随手指用户抬起手指（触摸端）-> 惯性滚动停止，页面移动 1 个视图上/下/左/右

目前我正在使用 Hammer.js，它的 prevent_default 设置为 true 效果很好，但拖动时内容不会跟随手指。

哪个更容易/更好，使用代码在拖动事件上移动页面，或者试图劫持 touchend 上的滚动？

4

1 回答 1

0

你在正确的轨道上！我喜欢hammer.js。如果您希望页面用用户的手指移动，我会使用代码在拖动事件上移动页面。例如，您可以执行以下操作：

hammer.bind('drag', function(ev) {
    x = ev.position.x;
    y = ev.position.y;
    mosaic.style.webkitTransform = 'translate3d('+(x) +'px, '+(y) + 'px, 1px)';

“马赛克”是容纳瓷砖的容器。棘手的部分是确定然后“捕捉”到哪个图像。也许您也可以使用 jQuery .offset() 来确定触摸坐标和马赛克之间的关系？

查看最新版本的 Hammer.js 以获得更多帮助。您现在还可以评估：

center      {Object}        center position of the touches. contains pageX and pageY
deltaTime   {Number}        the total time of the touches in the screen
deltaX      {Number}        the delta on x axis we haved moved
deltaY      {Number}        the delta on y axis we haved moved
velocityX   {Number}        the velocity on the x
velocityY   {Number}        the velocity on y
于 2013-02-15T19:55:52.540 回答