您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

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

时间:2022-02-08 14:12:40  来源:  作者:前端亦可行

简介

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('缩放了')
});

 

是不是非常的实用

觉得效果不错的请帮忙加个关注点个赞,经常分享前端实用开发技巧



Tags:Hammer.JS   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
简介Hammer 是一个精简且功能强大的手势库,它不但支持移动端的手势,对于PC端的鼠标操作也能实别 目前github的star量22.8K官网地址:http://hammerjs.github.io/github地址:http...【详细内容】
2022-02-08  Tags: Hammer.JS  点击:(7)  评论:(0)  加入收藏
▌简易百科推荐
简介Hammer 是一个精简且功能强大的手势库,它不但支持移动端的手势,对于PC端的鼠标操作也能实别 目前github的star量22.8K官网地址:http://hammerjs.github.io/github地址:http...【详细内容】
2022-02-08  前端亦可行    Tags:Hammer.JS   点击:(7)  评论:(0)  加入收藏
hi, 大家好, 我是徐小夕, 新的一年, 你又博学了吗?今天和大家分享一下使用 nodejs 实现短信验证码登录的方案, 通过对该方案的实现大家可以可以对 nodejs 及其相关生态有一...【详细内容】
2022-02-05  趣谈前端    Tags:验证码   点击:(15)  评论:(0)  加入收藏
几乎在所有面向用户或企业的应用程序中,所呈现出来的信息都不是一成不变的,即数据都是动态的,由某个或者多个后台服务所提供。那么就不可避免地会涉及到网络请求,而对于不同企...【详细内容】
2022-01-29  Nodejs开发    Tags:前端   点击:(18)  评论:(0)  加入收藏
开源版 Nginx 最为人诟病的就是不具备动态配置、远程 API 及集群管理的能力,而 APISIX 作为 CNCF 毕业的开源七层网关,基于 etcd、Lua 实现了对 Nginx 集群的动态管理。让 Ngi...【详细内容】
2022-01-14  AT小白在线中    Tags:Nginx集群   点击:(25)  评论:(0)  加入收藏
我发现前端开发比后端开发困难得多。一般来说,在后端开发中,我知道我在做什么以及所有东西应该如何交互,代码是否能正常运行。但是,当涉及到前端时,整个故事就不一样了。这会是无...【详细内容】
2022-01-10  铁匠哥哥    Tags:前端技能   点击:(35)  评论:(0)  加入收藏
相信每一个前端在对接 API 时,多多少少一定遇过以下错误: 虽然要解决此问题大部分还是需要后端帮忙,但前端也需要知道为什么会发生、要如何解决。同源政策 (Same Origin Policy...【详细内容】
2021-12-24  前端小智    Tags:同源政策   点击:(33)  评论:(0)  加入收藏
一般的docker镜像为了节省空间,通常是没有安装systemd或者sysvint这类初始化系统的进程。一旦容器的起始进程不稳定将会产生大量的僵尸进程,影响宿主系统的运行。 缺少init的...【详细内容】
2021-12-23  mj谈云技术    Tags:容器   点击:(36)  评论:(0)  加入收藏
作者:maomincoding 来源:前端历劫之路 前言说起文档,我们可能会第一时间会想起很多技术文档,比如Vue.js文档、React.js文档、TypeScript文档,它们都有相似的布局和样式。那么,作为...【详细内容】
2021-12-23  Nodejs开发    Tags:文档   点击:(37)  评论:(0)  加入收藏
作者:damyxu,腾讯 PCG 前端开发工程师iframe是一个天然的微前端方案,但受限于跨域的严格限制而无法很好的应用,本文介绍一种基于 iframe 的全新微前端方案,继承iframe的优点,补足...【详细内容】
2021-12-16  damyxu  腾讯技术工程  Tags:前端   点击:(48)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条