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页面点击及长按按钮后如下 说明手势事件生效了
