1.安装
npm install hammerjs --save && npm install @types/hammerjs --save-dev
2.创建MyHammerConfig.ts
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
}
}
3.module导入,并在providers里加入以下代码
providers: [{
provide: HAMMER_GESTURE_CONFIG,
useClass: MyHammerConfig
}]
4.在html中通过swipeEvent方法就可以监听到向上和向下的滑动了
html:!!!注意(swipe)不能写在<ion-content>
标签中,可以另起一个<div>
<ion-content >
<div (swipe)="swipeEvent($event)">
</div>
</ion-content>
ts:
import 'hammerjs';
swipeEvent($event) {
console.log($event.direction);
if ($event.direction === Hammer.DIRECTION_LEFT) {
alert('left');
} else if ($event.direction === Hammer.DIRECTION_RIGHT) {
alert('right');
} else if ($event.direction === Hammer.DIRECTION_UP) {
alert('up');
} else if ($event.direction === Hammer.DIRECTION_DOWN) {
alert('down');
}