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

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