javascript - Swipe updown not working on Ionic 2 - Stack Overflow

admin管理员组

文章数量:1291009

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>

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>

• javascript
• ionic2
• hammer.js

Share Improve this question Follow asked Feb 13, 2017 at 3:26 brians69brians69 48533 gold badges1212 silver badges2626 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 13

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 
}]

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

本文标签： javascriptSwipe updown not working on Ionic 2Stack Overflow