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

您有两种选择：

使用MSGesture，并处理MSGestureStart, MSGestureChange, and MSGestureEnd事件以计算用户手指（或手指）的平移，并查看它们是否在正确的方向上。 MSGestureChange返回的事件对象包括translateX＆amp; translateY属性，告诉您用户移动手指的距离。有一个详细的样本here。
使用Windows.UI.Input.GestureRecognizer并使用手势对象上的gesture settings将手势设置为特定X翻译或Y翻译。 Ball Eight sample显示了如何执行此操作。它主要涉及创建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，每个方向都有一个函数来进一步处理手势。

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

2 个答案: