Unable to use all swipe/darg events, but on-swipe works

Ionic Framework ionic-v3
1
Swipe
works well. but
SwipeLeft
not working, neither the other directions (up,down and right) also the same as other gesture events, on-drag, on-hold,etc....why only on-swipe works. really confuse, anyone can help, thanks ? Ionic version 3.7.0
2

Can you show me your HTML and TypeScript code for the swipe code.
Then I might be able to help you. :slight_smile:

3

Hi cherry,
very simple demo only the first one works, here is the html and TS code, thank you~

html:

<div class="divtest" on-swipe="onSwipe()">
    OnSwipe
  </div>

  <div class="divtest" on-swipe-left="onSwipe()">
    OnSwipeLeft~
  </div>

  <div class="divtest" on-swipe-right="onSwipe()">
    OnSwipeRight~
  </div>
  <div class="divtest" on-swipe-up="onSwipe()">
    OnSwipeUp~
  </div>

  <div class="divtest" on-hold="onHold()">
    OnHold
  </div>
  <div class="divtest" (on-drag)="onHold()">
      (on-drag)
    </div>
    <div class="divtest" on-drag="onHold()">
        on-drag
      </div>

  <div class="divtest" (on-hold)="onHold()">
    (OnHold)
  </div>

Typescript:

export class HomePage {

constructor(public navCtrl: NavController) {

}

onSwipe(){
alert(“OnSwipe~”);
}
onHold(){
alert(“OnHold~”);
}
}

4

Here is what you should add to your TS.

import { Component } from '@angular/core';

export class HomePage {
public swipe: number = 0;
}

  constructor() {}

  swipeEvent($e) {
    this.swipe++
    console.log(this.swipe++);
}

HTML


<ion-content>
<div class="divtest" (swipe)="swipeEvent($event)">
    OnSwipe
  </div>
</ion-content>

So what this basicly does, it recognizes your swipe event with a number wich will be displayed in the console. Now what we want is to recognize if its swiped left/right/up/down.

TS
[Ill chose a random number you have to decide wich one is right for you]

swipeEvent($e) {
  if ($e.deltaX <= -130) {
      console.log('swiped left');
      }else if{
     ($e.deltaX <= 130)
     console.log('swiped right');
     }else if{
    ($e.deltaY <= 130)
     console.log('swiped up');
     }else if{
    ($e.deltaY <= -130)
    console.log('swiped down');
   }
}

Short explanation to the code show above. If the certain number is reached it will print the console.log for the reached swiped number. You will have to let go to reset the number.

I hope this gave you an idea how you can play around with swipe gestures. Just try it out and don’t hesitate reporting your results! :bird:

5

Hi cherry，
Thank you very much~
try your code, swiped left and rihgt works well, but don’t work for up and down.
And I try to print the “deltaY”,no console.log result when swipe vertical, must have some angle…
Another querstion, why “ion-swipe-up” wont work? Is it be cancelled, I found it in ionic v1,but not in the laster doc.

6

I sadly can’t answer that because I don’t know the answer :grin:.

Hmm odd what you can do, put this into your code console.log($e.detlaY);. Then you can see what numbers you have to use.

swipeEvent($e) {
console.log($e.detlaY);
  if ($e.deltaX <= -130) {
      console.log('swiped left');
      }else if{
     ($e.deltaX <= 130)
     console.log('swiped right');
     }else if{
    ($e.deltaY <= 130)
     console.log('swiped up');
     }else if{
    ($e.deltaY <= -130)
    console.log('swiped down');
   }
}

Good luck!

7

OK~
Thank you for your help~