1.安裝
npm install hammerjs --save && npm install @types/hammerjs --save-dev
2.建立MyHammerConfig.ts
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIwczX0xiRGZkRGZ0Xy9GbvNGL2EzXlpXazxSPJRVTxEERPBTV65ENj1mYwBnMMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnL0YDNwIjM1QTM4ATOwkTMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
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');
}
參考資料:https://www.jianshu.com/p/d9e70df5366a