javascript - 我如何知道用户滑动的方向？

Question

我使用这个名为 Dragend 的插件 https://github.com/Stereobit/dragend具有触摸功能。我认为这使用了 Hammertime 的一些代码，如果你比 Dragend 更了解这个插件的话。

有诸如 onDrag 或 onSwipeStart 和 onSwipeEnd 之类的选项来确定这些事件发生的情况。

但是我就是不知道如何查看我刚刚滑动的方向。即使您不知道这个插件，我也希望有人能帮助我。也许使用一些 JQuery 来检查滑动期间/之后所做的 HTML/CSS 更改？

Answer 1

查看插件 http://stereobit.github.io/dragend/demos/simple/ 。通过修改变换值来发生滑动。如果我们从插件演示页面的示例代码中获取一些 html 部分。

<div id="swipeWrapper" style="overflow: hidden; width: 2500px; box-sizing: content-box; backface-visibility: hidden; perspective: 1000px; margin: 0px; padding: 0px; transform: translateX(-500px);"></div>

为了便于说明，让我们为包装 div 添加一个 id，并将其命名为 swipeWrapper。在你的 JavaScript 文件中。从 div 读取变换值。

var prevTransformValue = 0;//Initialize the value before you swipe; 
var swipeWrapper = document.getElementById('swipeWrapper');
var transformValue = swipeWrapper.style.transform;
var currentTransformValue =  transformValue.replace(/[^\d|^\-]/g,'');

示例中的translateValue是“translateX(-500px)”； 当前变换值 = "-500";

现在比较 prevTransformValue > currentTransformValue 滑动方向为左， prevTransformValue < currentTransformValueswipe 滑动方向为右。

注意:不要忘记设置 prevTransformValue = currentTransformValue;获得方向值后。此示例是如果您在水平方向上滑动。