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

ionic4中的手势事件相关推荐

ionic4 hammerjs手势事件左滑右滑
ionic4 hammerjs手势事件左滑右滑首先需要安装hammerjs ,在项目目录下执行: npm install hammerjs --save ts: import 'hammerjs'; ...
ionic3中的gestures 手势事件- ioni3c长按事件
原文出处: http://www.ionic.wang/article-index-id-83.html ionic3中的gestures 手势事件如下: ionic3中的gestures 手势事件包 ...
JavaScript触摸与手势事件
处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: 1.touchstart: // 手指放到屏幕上的时候触发 2.touchmove: // 手指在屏幕上移 ...
了解 WPF 中的路由事件和命令
目录路由事件概述 WPF 元素树事件路由路由事件和组合附加事件路由命令概述操作中的路由命令命令路由定义命令命令插入路由命令的局限避免命令出错超越路由命令路由处理程序示例要想 ...
Android中的Touch事件
Android中的Touch事件处理主要内容 Activity或View类的onTouchEvent()回调函数会接收到touch事件. 一个完整的手势是从ACTION_DOWN开始,到ACTION ...
android 手势事件重写,Android实现通过手势控制图片大小缩放的方法
本文实例讲述了Android实现通过手势控制图片大小缩放的方法.分享给大家供大家参考,具体如下: 该程序实现的是通过手势来缩放图片,从左向右挥动图片时图片被放大,从右向左挥动图片时图片被缩小,挥动速度 ...
IOS 定义手势监听器详解，利用 UIGestureRecognizer 进行捏合、旋转、平移、点击、长按手势事件响应
IOS中我们可以通过UITouch进行触摸事件监听,但是UITouch实现捏合.旋转.长按等手势事件监听非常麻烦.IOS中提供 UIGestureRecognizer 的子类帮我们简洁等实现捏合.旋转 ...
ios 滑动手势事件与cell touchevent事件_深入浅出~手势操作原理分析
序言在移动端开发中,手势操作非常常见,本篇文章主要讲解常见的 9 种手势操作原理,期间会穿插一些数学知识,将数学运用到实际问题中,数学部分可能会比较枯燥,但希望大家坚持读完,相信会收益良多. 点按: ...
vue 多点触控手势_移动端手势事件（多指操作）
在移动端开发中,现有的手势事件只有IOS上的浏览器支持,因此对其他设备上的浏览器手势事件我们必须在移动端的touchstart.toucmove.touchend事件上进行改造升级,下面就介绍下升级改 ...

ionic4中的手势事件

ionic4中的手势事件相关推荐

最新文章

热门文章