0

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

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

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

4

1 回答 1

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; 获得方向值后。这个例子是如果你在水平方向上滑动。

于 2016-05-15T13:28:38.377 回答