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

Question

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

在我的 html 我有：

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

每次滑动时都会调用 swipeEvent。

我的 swipeEvent javascript 代码如下所示：

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

如何判断是左滑还是右滑

Answer 1

您可以使用 Ionic 绑定单独的事件处理程序，例如：

<ion-content on-swipe-left="onSwipeLeft()" on-swipe-right="onSwipeRight()">

您也可以使用 on-swipe 如：

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

$scope.swiped = function($e) {
  var what = '';
  switch ($e.gesture.direction) {
    case 'up':
      what = 'Swiped up';
      break;
    case 'down':
      what = 'Swiped down';
      break;
    case 'left':
      what = 'Swiped left';
      break;
    case 'right':
      what = 'Swiped right';
      break;
    default:
      what = 'Swiped ???';
      break;
  }
  alert(what)

}

使用 Ionic 2

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


swipeEvent($e) {
  var what = '';
  switch ($e.gesture.direction) {
    case 'up':
      what = 'Swiped up';
      break;
    case 'down':
      what = 'Swiped down';
      break;
    case 'left':
      what = 'Swiped left';
      break;
    case 'right':
      what = 'Swiped right';
      break;
    default:
      what = 'Swiped ???';
      break;
  }
  alert(what)
}

Ionic Docs

Answer 2

看起来这些手势是建立在 HammerJS as stated in the Ionic 2 docs 之上的。

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

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

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

   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 events 来定位特定的滑动方向。

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

这是通过反复试验才发现的，它似乎适用于大多数事件！

Answer 3

html

<ion-navbar *navbar>
  <ion-title>Main</ion-title>
</ion-navbar>

<ion-content padding class="main">
    // height: 300px; background-color: #000;  => visible for test
    <div (pan)='swipeEvent($event)'></div>
</ion-content>

打字稿

export class MainPage {
    constructor(public nav: NavController) { }

    swipeEvent($e) {
        // swipe left $e.direction = 2;

        // pan for get fired position
        console.log($e.deltaX+", "+$e.deltaY);
    }
}

如果 deltaX > 0 向右滑动，否则向左滑动。我喜欢使用 pan 而不是 swipe 因为我想制作与 Scrollyeah

相同的幻灯片图像

Answer 4

只是为了更新 - 从 Ionic 3.19.0 开始，功能如下：

<div (swipe)="swipeEvent($event)" />

和

swipeEvent($e) {
    if($e.offsetDirection == 4){
        // Swiped right, for example:
        this.week.prevWeek();
    } else if($e.offsetDirection == 2){
        // Swiped left, for example:
        this.week.nextWeek();
    }
}

此外 - 如果您只关心左右滑动，则还有一种更快的内联解决方案：

<div (swipe)="($event.direction === 4) ? calendar.back() : calendar.forward()" />

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

Determine whether a swipe event is for a left swipe or a right swipe

javascript

ionic-framework

ionic2

angular