首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券