PhoneGap 中的滑动和平移

2025年3月17日 | 阅读 3 分钟

在之前的关于手势的章节中，我们学习了 Hammer 库、点击、触摸，以及如何在 PhoneGap 中检测手势。在本节中，我们将学习滑动和平移手势。我们将仔细研究这些手势的工作原理。我们将使用之前的例子，并对其进行一些更改以实现点击和触摸手势。以下是开发点击和触摸手势应用程序所使用的步骤：

1) 创建 index2.html

我们将创建一个名为 index3.html 的新文件，其中包含与 index.html 中预设的相同的代码。我们稍后将在 index3.html 文件中进行更改，而不是在 index.html 中。

2) 获取手势 div

现在，我们将使用 id 获取手势 div，并创建 hammer 对象。我们将使用 <script></script> 标签在 body 部分获取手势元素并创建 hammer 对象。这会以与 window.onload 函数相同的方式工作。

<body>
        <div id="gestureDiv"></div>
        <div id="resultDiv"></div>
        <script type="text/javascript" src="cordova.js"></script>
        <script>
          	    var myElement = document.getElementById('gestureDiv');
                var mc = new Hammer(myElement);
        </script>
</body>

3) 找出事件类型

当我们向左或向右滑动屏幕时，将调用匿名函数。此函数将返回事件，然后我们将事件类型存储到变量中。之后，我们将以下面的方式将此变量设置为我们的结果 div：

var out = ev.type + "<br/>";
document.getElementById('resultDiv').innerHTML = out;

4) 更多信息

我们有很多信息，而不仅仅是手势的类型。我们可以通过以下方式添加手势中移动的距离：

我们还可以获得滑动的角度。下面提到的代码行告诉我们滑动发生的角度。

我们还可以获得 delta x 和 delta y。 Delta x 和 delta y 分别是沿 x 轴和 y 轴移动的距离。

out += "DeltaX: " + ev.deltaX + "<br/>";
out += "DeltaY: " + ev.deltaY + "<br/>";

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8" >
        <meta name = "viewport" content = "initial-scale = 1, maximum-scale = 1, user-scalable = no, width = device-width" >
        <script src = "hammer.js" ></script>
        <script src = "hammertime.js" ></script>
        <style>
        #gestureDiv
            {
                width : 300px;
                height : 400px;
                background-color : red;
                border : 1px solid black;
            }
        </style>
        <title> Gesture Example </title>
    </head>
    <body>
        <div id = "gestureDiv" ></div>
        <div id = "resultDiv" ></div>
        <script type = "text/javascript" src = "cordova.js" ></script>
        <script>
          var myElement = document.getElementById('gestureDiv');
                var mc = new Hammer(myElement);
                mc.on("swipeleft swiperight", function(ev) {
	    	var out = ev.type + "<br/>";
                	out += "Distance: " + ev.distance + "<br/>";
	    	out += "DeltaX: " + ev.deltaX + "<br/>";
	    	out += "DeltaY: " + ev.deltaY + "<br/>";				
	    	document.getElementById('resultDiv').innerHTML = out;
            });	
        </script>
    </body>
</html>

下载完整项目

下一主题点击 & 触摸手势