Question

我正在使用Angular 2和离子2，我试图捕获左右滑动。我可以捕捉到滑动，但无法确定如何左键或右键滑动。

在我的HTML中我有：

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

每次滑动时都会调用swipeEvent。

我的swipeEvent javascript代码如下所示：

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

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

Answer 1

如HammerJS中所述，手势似乎建立在Ionic 2 docs之上。

您可以定位特定手势以触发特定功能。建立在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 2

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>

typescrip

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＆gt; 0向右滑动，否则向左滑动。我想使用pan代替swipe，因为我想制作与Scrollyeah相同的幻灯片图片

Answer 3

您可以使用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 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()" />

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

4 个答案: