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,'');

示例中的transformValue是＆＃34; translateX（-500px）＆＃34 ;; currentTransformValue =＆＃34; -500＆＃34 ;;

现在比较prevTransformValue＆gt; currentTransformValue左侧滑动方向和prevTransformValue＆lt; currentTransformValueswipe滑动方向是对的。

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

我怎么知道用户刷了哪个方向？

1 个答案: