我怎样才能知道用户滑动的方向

How can I know which direction the user swiped?

本文关键字：用户 方向      更新时间：2023-09-26

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

有类似onDrag或onSwipeStart和onSwipeEnd的选项来确定这些事件发生了什么。

然而，我只是不知道如何看到我刚刚滑动的方向。即使你不知道这个插件，我希望有人能帮我。也许用一些JQuery来检查在滑动过程中/之后所做的HTML/CSS更改？

查看插件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,'');

示例中的transformValue是"translateX（-500px）"；currentTransformValue="-500"；

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

注意：不要忘记设置prevTransformValue＝currentTransformValue；在你得到方向值之后。这个例子是如果你在水平方向上滑动。

相关文章：