Question

95

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

rated 0 times [ 101] [ 6] / answers: 1 / hits: 25721 / 8 Years ago, sun, may 1, 2016, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

brynn

Add To Favorites

Follow

Total Points: 448

Total Questions: 83

Total Answers: 118

Location: Albania

Member since Sun, Nov 22, 2020

4 Years ago

answered 8 Years ago keyonna · Accepted Answer

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!