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:
<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');
}
ps:之前項目裏有hannerjs,這裏沒介紹