确定滑动事件是用于向左滑动还是向右滑动

Question

我正在使用Angular 2和离子2,我试图捕获左右滑动.我可以捕捉滑动,但无法确定如何确定它是向左还是向右滑动.

在我的HTML中,我有:

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

swipeEvent每次滑动时都会调用此方法.

我的swipeEventjavascript代码如下所示:

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

如何确定它是向左还是向右滑动.

Answer 1

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

您可以定位特定手势以触发特定功能.建立在Hammer.js之上......

当您触发滑动事件时,对象将传递给绑定方法,它包含一个选项e.direction,该选项是与滑动方向对应的数值.

下面是其定义方向常量列表这里的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已经在他们的手势文档中覆盖了这个),您可以在HTML标记中使用HammerJS事件来定位特定的滑动方向.

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

只是通过反复试验找到了它,它似乎适用于大多数事件!