首页
学习
活动
专区
圈层
工具
发布

WebApp移动端手势完美实现方案:Hammer

落水流红,闲愁万种,无语怨东风。

Hammer介绍

Hammer库是一个移动端手势库,移动端的手势操作(比如touch,tap,拖动,滑动等等)都可以用这个库,而我们不用关心,它的底层方案具体是怎么实现的。我们知道手势的操作可以很复杂,比如缩放,长按等等。 而这个库都帮我们都做好了,并且它非常的轻量,压缩后只有7.34kb。

使用方法

非常简单:

第一步是拿到你要操作的元素:

第二步是实例化Hammer对象:

第三步是监听你的手势事件:

手势事件

手势事件具体有哪些?

第一类是平移:

pan

panstart

panmove

panend

pancancel

panleft 往左平移

panright 往右平移

panup

pandown

第二类是缩放类

pinch

pinchstart

pinchmove

pinchend

pinchcancel

pinchin

pinchout

第三类是按住

ress

pressup

第四类是旋转

rotate

rotatestart

rotatemove

rotateend

rotatecancel

…

还有一些,我就不一一介绍了。

自定义手势事件

除了API上的一些手势事件,还支持自定义的事件,比如点击4下才触发一个事件。

第一步:实例化一个Hammer.Manager对象

第二步:添加自定义事件:

第三步:监听自定义事件

上面的代码中ev是我们的事件对象,可以在控制台查看它具体包含了哪些对象。

比如看它的事件类型:

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180307G0C14Y00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。
领券