【技巧】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>

总结:其实就很简单的内容,只是很多人不知道而已。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

ActiveReports 报表应用教程 (7)---交叉报表及数据透视图实现方案

在葡萄城ActiveReports报表中可以通过矩阵控件非常方便的实现交叉报表,同时还可以设置数据的分组、排序、过滤、小计、合计等操作,可以满足您报表的智能数据...

20350
来自专栏张戈的专栏

图片压缩瘦身好工具:Image Optimizer 绿色版 V5.10 下载

此次推荐的实用小软件是一款图片减肥工具,因为此时博主正在给表哥的公司做 CMS 网站,他发给我的产品图片都是都是 PSD 格式的,大小均为 45M~70MB,如...

43550
来自专栏CDA数据分析师

R可视化之交互式地图展示

来源 | 数据人网 文 | 薛丽丹 leaflet是来构建交互式地图JavaScript库。RStudio发布了一些允许在R建立这些地图的包,我们可以利用lea...

29190
来自专栏飞雪无情的博客

Go语言生成二维码是如此简单

二维码作为一种快速的输入手段越来越流行,支付,添加好友,买东西,扫个二维码就可以,非常方便。那么二维码是如何制作生成的呢?我们如何制作自己的二维码呢?

32930
来自专栏学习圈

移动端通用优化方案

手机屏幕帧率一般为60 FPS,也就是说一帧的渲染时间为16.7ms,所以如果页面渲染时间超过16.7ms 容易出现卡顿现象。提高页面渲染效率可以考虑如下方法:

256110
来自专栏技术小黑屋

两分钟理解Android中SP与DP的区别

因此通常情况下,我们还是建议使用sp作为字体的单位,除非一些特殊的情况,不想跟随系统字体变化的,可以使用dp.

14120
来自专栏机器学习养成记

ggplot2:结合ggmap绘制地图

ggmap包整合了四种地图资源,分别是Google、OpenStreetMaps、Stamen和Cloudmade。可以方便的与ggplot进行涂层叠加,实现在...

42480
来自专栏数据存储

硬盘IO性能估算入门

IO是输入输出指令,操作系统向存储控制器下发一个读或者写数据的操作指令,控制器下发地址和数据给存储设备,并返回结果给存储控制器,最后到达操作系统。操作系统的一个...

830130
来自专栏应兆康的专栏

Bing 每日一图 & 随机图片 API

大家都知道微软的 Bing 搜索引擎首页每天都会提供了一些有趣的图片,而这些图片很多都是有故事含义的,很多网友每天去访问 Bing 首页都是为了这些图片而去的。...

1.4K70
来自专栏菩提树下的杨过

silverlight3中的"伪"3D

silverlight3中的3d效果,实际上是通过2d+算法模拟出来的"伪3D"(个人估计可能是考虑跨平台和显卡硬件支持通用性所以最终采用了这种设计) ? 上面...

20380

扫码关注云+社区

领取腾讯云代金券