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

Question

I am using Angular 2 and ionic 2 and am trying to capture left and right swipes. I can capture a swipe but can't work out how to determine if it is a left or right swipe.

In my html I have:

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

This calls swipeEvent every time a swipe occurs.

My swipeEvent javascript code looks like this:

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

How can I determine if it is a left or right swipe.

Answer 1

It looks like the gestures are built on top of HammerJS as stated in the Ionic 2 docs .

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

When you trigger a swipe event an object gets passed to the bound method it contains an option e.direction which is a numeric value corresponding to a swipe direction.

Below is the list of direction constants which are defined here in the HammerJS docs

  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 

Example

Given your ion-content setup

swipeEvent(e) {
    if (e.direction == 2) {
        //direction 2 = right to left swipe.
    }
}

Useful tip

Alternatively (doesn't look like Ionic have covered this in their gestures doc), you can use HammerJS events in the HTML tag to target a specific swipe direction.

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

Only found this out by trial and error and it seemed to work for most events!

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);
    }
}

if deltaX > 0 swipe right else swipe left. i like to use pan instead of swipe because i want to make a slide image same as Scrollyeah

Answer 3

You cab bind separate event handlers with Ionic, like:

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

You may also use on-swipe like:

<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)

}

Using 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

Just to update - as of Ionic 3.19.0, functionality is as follows:

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

and

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();
    }
}

Also - an even quicker inline solution, if you're only concerned with left and right swipes:

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

Answer 5

For Ionic 4+,

See my answer on this post here:

https://stackoverflow.com/a/70089543/9378740