javascript - 判断滑动事件是左滑动还是右滑动

Question

我正在使用 Angular 2 和 ionic 2 并试图捕捉左右滑动。我可以捕获一次滑动，但不知道如何确定它是向左还是向右滑动。

在我的 html 中我有:

<ion-content (swipe)="swipeEvent($event)">

每次滑动发生时都会调用 swipeEvent。

我的 swipeEvent javascript 代码如下所示:

swipeEvent(event){
        alert('swipe');
    }

如何判断是左滑还是右滑。

Answer 1

看起来手势是建立在HammerJS之上的如 Ionic 2 docs 中所述.

You can target specific gestures to trigger specific functionality. Built on top of Hammer.js...

当您触发滑动事件时，一个对象被传递给绑定(bind)方法，它包含一个选项 e.direction，它是一个对应于滑动方向的数值。

下面是定义的方向常量列表 here在 HammerJS 文档中

   Name              Value
DIRECTION_NONE         1
DIRECTION_LEFT         2
DIRECTION_RIGHT        4
DIRECTION_UP           8
DIRECTION_DOWN         16
DIRECTION_HORIZONTAL   6
DIRECTION_VERTICAL     24
DIRECTION_ALL          30

示例

根据您的ion-content 设置

swipeEvent(e) {
    if (e.direction == 2) {
        //direction 2 = right to left swipe.
    }
}

有用的提示

或者(看起来 Ionic 没有在他们的手势文档中介绍这个)，你可以使用 HammerJS events在 HTML 标记中定位特定的滑动方向。

<ion-content (swipeleft)="swipeLeftEvent($event)">

仅通过反复试验发现这一点，它似乎适用于大多数事件!