MsGesture，在地铁风格的应用程序中向不同方向滑动

Question

我有这个代码可以很好地处理手指滑动手势，即如果我滑动手指，它会触发事件并调用nextMonth()函数。现在有没有什么方法可以检查我是否向上和向下滑动，这样我就可以对两个不同的手势调用两种不同的方法。

var myGesture = new MSGesture();
var v = this.element.querySelector(".bartouch");
myGesture.target = v;
v.addEventListener("MSGestureEnd", handleListner,false);
v.addEventListener("MSPointerDown", handleListner, false);
function handleListner(evt) {
if (evt.type == "MSPointerDown")   
{
myGesture.addPointer(evt.pointerId);
return;
}
that.nextMonth();
}

Answer 1

您有两个选择：

1. 使用MSGesture，并处理MSGestureStart、MSGestureChange和MSGestureEnd事件来计算用户手指(或多个手指)的平移，并查看它们的方向是否正确。CCD_ 5返回的事件对象包括CCD_；translateY属性，告诉您用户已将手指移动了多远。这里有一个详细的样本。

2. 使用Windows.UI.Input.GestureRecognizer并使用手势对象上的手势设置将手势设置为特定的X平移或Y平移。Ball Eight示例显示了如何执行此操作。它主要涉及创建GestureRecognizer类，并通过处理要查看交互的DIV上的MSPointer[Down|Move|Up|Cancel]DOM事件来为其提供事件，并通过其process[Down|Move|Up]Event处理程序将它们传递给您的(共享)识别器实例。

就我个人而言，我建议使用2，而不是1——虽然设置起来更困难，但最终用户会对滑动、轻弹等有一致的手势体验，而不是像选择方法1那样手动调整手势。

Answer 2

我在一款游戏中成功地使用了HammerJS来处理各种方向的手势。

这是我处理所有四个方向所需的所有代码：

var hammerOptions = { swipeVelocityX: 0.1, swipeVelocityY: 0.1 };
Hammer(contentContainer, hammerOptions).on("swipeleft", function(event) { moveBlocksLeft(); });
Hammer(contentContainer, hammerOptions).on("swiperight", function(event) { moveBlocksRight(); });
Hammer(contentContainer, hammerOptions).on("swipeup", function(event) { moveBlocksUp(); });
Hammer(contentContainer, hammerOptions).on("swipedown", function(event) { moveBlocksDown(); });

其中contentContainer是一个包含内容的div，每个方向都有一个进一步处理手势的功能。