艺宵网 分享瞬间 功能强大的手势库-Hammer.JS

功能强大的手势库-Hammer.JS

简介 Hammer 是一个精简且功能强大的手势库,它不但支持移动端的手势,对于PC端的鼠标操作也能实别 目前g…

简介

Hammer 是一个精简且功能强大的手势库,它不但支持移动端的手势,对于PC端的鼠标操作也能实别

目前github的star量22.8K

官网地址:http://hammerjs.github.io/

github地址:https://github.com/hammerjs/hammer.js

安装

npm i hammerjs -S

使用教程

// 引入手势库
import Hammer from 'hammerjs'

// 新建一个手势实例
// myElement是要监听手势的dom元素
const hammer = new Hammer(myElement);

hammer.on("panleft", function(ev) {
  console.log('左滑了')
});

hammer.on("panright", function(ev) {
  console.log('右滑了')
});

hammer.on("tap", function(ev) {
  console.log('单点击了')
});

hammer.on("doubletap", function(ev) {
  console.log('双点击了')
});

hammer.on("press", function(ev) {
  console.log('长时间按压了')
});

为了性能,Hammer默认只开启了上面的这些手势

如果要开启上滑、下滑、多手指的旋转、缩放需要单独设置开启

// 各个方向的滑动手势都开启
hammer.get('pan').set({ direction: Hammer.DIRECTION_ALL });

// 开启缩放手势实别
hammer.get('pinch').set({ enable: true });

// 开启旋转手势实别
hammer.get('rotate').set({ enable: true });

hammer.on("panup", function(ev) {
  console.log('上滑了')
});

hammer.on("pandown", function(ev) {
  console.log('下滑了')
});

hammer.on("rotate", function(ev) {
  console.log('旋转了')
});

hammer.on("pinch", function(ev) {
  console.log('缩放了')
});

是不是非常的实用

本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。http://www.yixao.net/boke/29925.html
Vedu

作者: Vedu

这个人很懒,什么都没有留下~

发表评论

联系我们

联系我们

15378714280

在线咨询: QQ交谈

邮箱: yixaonet@163.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部