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

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是“translateX（-500px）”; currentTransformValue =“-500”;

现在比较prevTransformValue> currentTransformValue滑动方向是左和prevTransformValue < currentTransformValueswipe滑动方向是正确的。

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