ionic5中手势相关事件的使用

前言

ionic5中的gestures手势事件包括:tap(点击)、press(按下)、pan(随着手指移动)、swipe(随着手指迅速移动)、rotate(旋转)、pinch(缩放)等

准备

首先我们在项目中新建一个页面用于演示手势的运用

ionic g page gestures

在tab1中新建按钮链接到gestures页面 tab1.page.html:

<ion-button [routerLink]="[/gestures]">
  跳转到gestures页面
</ion-button>

使用tap(点击)、press(按下)

我们在gestures中新建两个按钮,并绑定tap和press事件 tab1.page.html:

<ion-button (tap)="doTap()">
    点击事件
 </ion-button>
 <ion-button (press)="doPress()">
   长按事件
</ion-button>

在ts中定义相应方法

doTap() {
          
   
  console.log("tab...");
}

doPress() {
          
   
  console.log("press...");
}

我们在页面上点击第一个按钮和长按第二个按钮,日志都没打印 这是因为我们如果想要使用手势事件就需要安装hammerjs

安装hammerjs

npm install hammerjs –save

在项目的src/main.ts中引入hammerjs

main.ts:

在app.module.ts中引入HammerModule

测试

接着重启后打开浏览器后进入gestures页面点击及长按按钮后如下 说明手势事件生效了

经验分享 程序员 微信小程序 职场和发展