CODEWITHSUNDEEP
javascriptionic2hammer.js
brians69
brians69

Reputation: 485

Swipe up/down not working on Ionic 2

How can I use swipe up or swipe down with Ionic 2?

I've tried the Gestures API but it only fires on horizontal swipe.

<ion-card (swipe)="swipePage($event)">
</ion-card>

Upvotes: 2

Views: 3329

Answers (2)

Kelly O&#39;blair
Kelly O&#39;blair

Reputation: 31

For Ionic 5+,

Install Hammerjs using npm install --save hammerjs @types/hammerjs

Then, on app.module.ts, HammerModule and BrowserModule like so:

import { BrowserModule, HammerModule } from '@angular/platform-browser';

Then, within the imports array, add HammerModule, and of course, BrowserModule that comes as default. Like so: imports: [BrowserModule, HammerModule,...]

Then, go to main.ts file and add import 'hammerjs';

If your project is being served using ionic serve, disconnect it and reconnect, to initialize your update.

To call the swipe events on your page, use (pan) or (swipe) events like so:

//home.page.html
<div (pan)="swipeEvent($event)"></div>

//home.page.ts

swipeEvent(e){
   swipeDirection = e.direction;
   console.log('Swipe',swipeDirection);
   //2 = left;
   //4 = right;
   //8 = top;
   //16 = down;
}

Upvotes: 0

kfa
kfa

Reputation: 2146

In the HammerJS official document, bottom line says :

When calling Hammer() to create a simple instance, the pan and swipe recognizers are configured to only detect horizontal gestures.

For additional config, you must tweak your hammer instance, try this :

First run npm install hammerjs --save && npm install @types/hammerjs --save-dev

import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import * as Hammer from 'hammerjs';

// create a class that overrides hammer default config

export class MyHammerConfig extends HammerGestureConfig  {
  overrides = <any>{
    'swipe': { direction: Hammer.DIRECTION_ALL } // override default settings
  }
}

// In your module providers, add this :

providers: [{ 
  provide: HAMMER_GESTURE_CONFIG, 
  useClass: MyHammerConfig 
}]

Upvotes: 13

Related Questions