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

Posted 2023-02-22

【中文标题】确定滑动事件是针对左滑动还是右滑动

【英文标题】：Determine whether a swipe event is for a left swipe or a right swipe

【发布时间】：2016-08-26 12:12:55

【问题描述】：

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

在我的 html 中，我有：

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

每次滑动都会调用swipeEvent。

我的swipeEvent javascript 代码如下所示：

swipeEvent(event)
        alert('swipe');
    

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

【参考方案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)">

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

【讨论】：

我也通过反复试验发现（向左滑动）。我相信它最终会被记录下来。

他们很可能会这样做，我注意到 (swipeleft) 和 (swiperight) 工作但 (swipeup) 和 (swipedown) 不工作。

好的，当我从左向右滑动时，值几乎是 4，但有些时候是 1 或 8，1 和 8 是什么意思？

点击我答案中的方向常数链接并找出答案；）

Ionic4 首先工作npm install hammerjs，然后进入main.ts 并添加行import 'hammerjs'; 这样hammerJS 将被加载，以利用滑动事件方法。

【参考方案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>

打字稿

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 相同的幻灯片图像

【参考方案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)

使用离子 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

【讨论】：

on-swipe-left 仅适用于 ionic 1 我正在使用 ionic 2。我将更改我的问题以提及我正在使用 ionic 2

Ionic 2 没有 $scope。

第二种方法不适用于 ionic 2: ORIGINAL EXCEPTION: TypeError: Cannot read property 'direction' of undefined

【参考方案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()" />