Question

我正在尝试在网络应用上进行此类操作，其中包含视图的“马赛克”，共6行6列视图。导航在桌面浏览器上运行良好，但使用Mobile Safari会很困难。

这是我想要的行动：

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

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

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

Answer 1

你走在正确的轨道上！我喜欢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（）来确定touche coords和你的马赛克之间的关系？

查看最新版的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

如何通过移动游猎停止在touchend上滚动？

1 个答案: