ionic4-手势使用

在ionic4项目中需要用到长按事件,于是直接去官网查询了下ionic4的api,但是很可惜没查到,貌似ionic4默认不支持手势识别,于是只能Google下(百度没搜到),好在Google还是很给力的,一下子就查到了相关的用法,在这里做个记录。

ionic4中的gestures 手势事件如下:

tap       // 点击事件
press   // 长按事件
pan      // 滑动的时候触发的事件,滑动触发多次
swipe   // 滑动事件 滑动触发一次
rotate   // 旋转事件
pinch   // 捏合(pinch)手势

使用步骤如下:
1.安装hammerjs依赖

npm install hammerjs --save

2.在ionic项目中引入hammerjs。在main.ts中,增加如下代码:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

// 引入hammerjs
import 'hammerjs';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

3.使用手势。完成上面步骤,我们就可以愉快的使用手势识别了

<ion-button (press)="onPress($event)">
      长按触发事件
</ion-button>

<ion-button (tap)="onTap($event)">
     点击触发事件
</ion-button>

PS:注意下,一定要安装hammerjs依赖,否则在使用时会不生效且出现如下提示:

The "press" event cannot be bound because Hammer.JS is not loaded and no custom loader has been specified.
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在开发过程中,大家或多或少的都会碰到令人头疼的手势冲突问题,正好前两天碰到一个类似的bug,于是借着这个机会了解了...
    闫仕伟阅读 5,539评论 2 23
  • 手势识别器 手势识别器将底层的事件处理代码转化为高层次的行为。它们是你可以添加到视图中的对象,让你的视图具备con...
    Randy1993阅读 463评论 0 1
  • 转载: https://blog.csdn.net/qq871531334/article/details/822...
    NicooYang阅读 1,627评论 0 9
  • 在iOS开发中经常会涉及到触摸事件。本想自己总结一下,但是遇到了这篇文章,感觉总结的已经很到位,特此转载。作者:L...
    WQ_UESTC阅读 6,157评论 4 26
  • 本文主要讲解iOS触摸事件的一系列机制,涉及的问题大致包括: 触摸事件由触屏生成后如何传递到当前应用? 应用接收触...
    baihualinxin阅读 1,230评论 0 9