ionic4中的手势事件

ionic4中的gestures 手势事件如下：

click     ionic4点击事件

on-hold ionic4长按事件

on-tap  ionic4轻击事件

swipe   ionic4滑动事件 滑动触发一次

on-double-tap  ionic4手双击屏幕事件

pinch  ionic4捏合(pinch)手势

on-swipe-left  ionic4向左滑动

手势详解链接：https://www.runoob.com/ionic/ionic-gesture-event.html

默认情况下面ionic4中的手势事件是没法使用的，下面我们就看看ionic4中的gestures 手势事件如何使用。

1、在使用ionic4手势事件之前第一步，首先需要安装hammerjs 

npm install hammerjs --save

2、在使用ionic4手势事件之前第二步，需要在项目的src/main.ts 中引入hammerjs ，完整代码如下

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import 'hammerjs';//引入hammerjs
if (environment.production) { 
 enableProdMode();
}

3、安装并引入hammerjs 后就可以在ionic4模板中使用手势事件了

 <ion-card (press)="presentActionSheet()" style="margin-top:4%;margin-bottom: 1%" *ngFor="let tasks of tasks" [ngStyle]="{'background-color': '#339efc'}">

    <ion-card-content class="taskName" > 
        {{tasks.tomatoName}}
    </ion-card-content>

   <ion-card-content class="start" > 
        <p>开始</p> 
   </ion-card-content>
   
  </ion-card>

 

文章链接：https://www.jianshu.com/p/53f64ea1de4f