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

javascript ionic-framework angular ionic2

25,055

Solution 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!

Solution 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

Solution 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

25,055

Bill Noble

Updated on July 09, 2022

Comments

Bill Noble almost 2 years
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.
Bill Noble about 8 years

on-swipe-left only works with ionic 1 I am using ionic 2. I will change my question to mention I am using ionic 2
Bill Noble about 8 years

Ionic 2 doesn't have $scope.
Bill Noble about 8 years

I too discovered (swipeleft) by trial and error. I am sure it will be documented eventually.
Will.Harris about 8 years

They more than likely will do, what i've noticed is (swipeleft) and (swiperight) work but (swipeup) and (swipedown) dont.
vuhung3990 almost 8 years

the second approach not work on ionic 2: ORIGINAL EXCEPTION: TypeError: Cannot read property 'direction' of undefined
vuhung3990 almost 8 years

ok, when i swipe left to right almost value is 4, but some time is 1 or 8, what does 1 and 8 mean ?
Will.Harris almost 8 years

Click on the direction constants link in my answer and find out ;)
Arup Bhattacharya over 7 years

@Will.Harris Thanks a lot. Your suggestion worked just perfect in my app.
TaeKwonJoe almost 7 years

@Will.Harris this custom gesture provider will enable vertical swipes: stackoverflow.com/a/42650832/1467810
saber tabatabaee yazdi over 5 years

works good but what about DIRECTION_NONE 1... what is the meaning of swip to direction none?
Grant almost 5 years

For Ionic4 to work npm install hammerjs first, then go into main.ts and add the line import 'hammerjs'; that way hammerJS will be loaded, to utilise the swipe event methods.