向上/向下滑动在 Ionic 2 上不起作用

Question

如何在 Ionic 2 中使用 swipe up 或 swipe down？

我已经尝试过手势 API，但它仅在水平滑动时触发。

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

Answer 1

在HammerJS官方文档中，底线说：

调用 Hammer(( 创建简单实例时，平移和滑动 识别器配置为仅检测水平手势。

对于其他配置，您必须调整锤子实例，请尝试以下操作：

首次运行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 
}]

Answer 2

对于 Ionic 5+，

使用 npm install --save hammerjs @types/hammerjs 安装 Hammerjs

然后，在 app.module.ts 上，HammerModule 和 BrowserModule 是这样的：

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

然后，在导入数组中，添加 HammerModule，当然还有默认的 BrowserModule。像这样：imports: [BrowserModule, HammerModule,...]

然后，转到main.ts文件并添加import 'hammerjs';

如果您的项目是使用 ionic serve 提供服务的，请断开连接并重新连接，以初始化更新。

要在页面上调用滑动事件，请使用如下所示的(平移(或(滑动(事件：

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