确定滑动事件是左滑动还是右滑动

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

本文关键字：事件      更新时间：2023-09-26

我正在使用Angular 2和ionic 2，并试图捕捉左右滑动。我可以捕捉到滑动，但无法确定是向左还是向右滑动。

在我的html中，我有：

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

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

我的swipeEvent javascript代码如下所示：

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

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

正如Ionic 2文档中所述，手势似乎是建立在HammerJS之上的。

您可以针对特定的手势来触发特定的功能。构建在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)">

只是通过反复试验才发现这一点，而且它似乎适用于大多数活动！

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，因为我想制作与Scrollyee 相同的幻灯片图像

您可以使用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

只需更新-从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()" />
相关文章：