【技巧】ionic3的手势Gestures
时间:2022-06-07
本文章向大家介绍【技巧】ionic3的手势Gestures,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
临睡前写点东西,时间有限,又是一篇简单的文章,是关于手势的,因为白天有人问到。
手势Gestures,ionic官网上的文档描述非常简单,就下面一段就没了,估计很多人看完直接就懵了:只有6个事件吗?
手势.png
我粗略搜索了ionic关于手势事件的文章,像pressup等内容的,居然没有,orz……ionic常常使用流行的库来补充自身,像slide组件就是封装了swiper,而手势是使用了另一个有名的库 HammerJS(想了解更多,戳它)。所以我们通过了解HammerJS就可以知道ionic3的手势事件——其实是6种,我简单列一下分类及其下事件:
一、pan——平移
pan.png
最小平移距离为10px,才会识别为pan.
pan
panstart
panmove
panend
pancancel
panleft
panright
panup
pandown
二、pinch——手指缩放
pinch.png
最少需要两个手指的操作,才会识别为pinch
pinch
pinchstart
pinchmove
pinchend
pinchcancel
pinchin
pinchout
三、press——按下
press.png
最小按下持续时间251ms,才会识别为press
press
pressup
四、rotate——旋转
rotate.png
最少旋转角度为0(我怀疑这个表述),才会识别为rotate
rotate
rotatestart
rotatemove
rotateend
rotatecancel
五、swipe——滑动
swipe.png
要求移动速度0.3px/ms,移动距离超过10px,才会识别为swipe
swipe
swipeleft
swiperight
swipeup
swipedown
六、tap——轻触
tap.png
多次tap间隔为300ms,用以区分是不是双击或其它,最大按下时间为250ms,用以区分press或其它
tap
上述事件在ionic中普通使用即可,具体事件参数通过$event获取,如下:
<button ion-button (press)="pressEvent($event)" (pressup)="pressupEvent($event)">
长按
</button>
总结:其实就很简单的内容,只是很多人不知道而已。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Spring 是如何解决循环依赖的?
- 移动webhead参数
- 看了这篇泛型,下次设计链表别傻傻的用int 表示node节点的值了
- 标准TensorFlow格式 TFRecords
- LeetCode 05最长回文子串
- 基于NCNN的3x3可分离卷积再思考盒子滤波
- [译]Buidler 新手教程
- tf.train.shuffle_batch函数解析
- 网页小图标Favicon
- ASP.net Core MVC项目给js文件添加版本号
- 多目标优化非支配关系实现
- linux之shell
- linux下的定时任务处理
- 10 个用纯 Javascript 实现的好用插件
- Tensorflow ActiveFunction激活函数解析