react-hammer库的详细介绍和实现滑动触摸点击事件方法

react-hammer 简介

react-hammer 是一个帮助 react 实现移动端拖拽效果的插件，其实React-hammer就是基于hammer.js 构建而成的一个更适合在 React 中使用的触摸插件，react-hammer里面封装了很多js的事件（滑动，点击，触摸，移动，双击，缩放，拖拽等），比起写原生js事件更加容易使用，并且兼容性很强

hammer.js 简介

我们已经学习了HTML5中关于移动设备的触摸、手势等控制事件等知识，然而，在实际的JavaScript编写过程中，这些控制需要较为复杂的代码支持，特别是在手势控制和设备兼容性方面需要花较大精力进行开发，原生的js事件已经不流行了

为了节省生命（有效减轻我们在移动端的开发压力，轻松控制各种触摸手势），我们可以使用更加简便的方式来控制HTML5中的移动端手势，即使用各种开源类库。在此，我们介绍一个较为流行的轻量级类库：Hammer ， 是提供给 js 的插件 跟 react-hammer 写法不一样而已

http://hammerjs.github.io/getting-started/ 官网地址

建议用QQ浏览器打开 翻译再看

react-hammer 使用方法

npm 安装 react-hammer

npm install react-hammerjs --save

引入 react-hammer 模块 两种引入方式
第一种 通过 require() 引入

let Hammer = require('react-hammerjs')

<Hammer>
	<div>Tap Me</div>
</Hammer>

第二种 是 import 引入

import Hammer from "react-hammerjs"

<Hammer>
	<div>Tap Me</div>
</Hammer>

Hammer 标签的属性有：

事件	说明
onTap	点击事件
onDoubleTap	双击事件
onPan	触摸事件
onPanCancel	触摸取消事件
onPanEnd	触摸结束事件
onPanStart	触摸开始事件
onPinch	两指按住缩放事件
onPinchCancel	两指按住缩放取消事件
onPinchEnd	两指按住缩放结束事件
onPinchIn	缩小事件
onPinchOut	放大事件
onPinchStart	两指按住缩放开始事件
onPress	单指下拉事件
onPressUp	单指向上事件
onRotate	双指旋转事件
onRotateCancel	双指旋转取消事件
onRotateEnd	双指旋转结束事件
onRotateMove	双指旋转移动事件
onRotateStart	双指旋转开始事件
onSwipe	滑动事件

注意：
默认状态下 是无法进行Pinch 和 rotate 操作的 需要手动将其设置为true

let options = {
  recognizers: {
    pinch: { enable: true },
    rotate: { enable: true }
  }
}

<Hammer options={options} >
  <p>{text}</p>
</Hammer>

这样才能进行缩放以及旋转动作

Hammer 标签的事件对象有：

每一个事件的回调函数中都有一个事件对象 包含以下属性 (展示部分常用属性)

事件对象	含义
type	事件类型
deltaX	X轴方向移动
deltaY	Y轴方向移动
distance	移动距离
direction	移动的方向
srcEvent	事件来源
rotation	多点触摸时已经完成的旋转（deg）
eventType	事件类型，匹配INPUT常量

实例：

<Hammer
	onPan={(e)=>{  //onPan 事件 
		console.log("type",e.type)  //事件类型
		console.log("deltaX",e.deltaX)  //X轴方向移动
		console.log("deltaY",e.deltaY)  //Y轴方向移动
		console.log("distance",e.distance)  //移动距离
		console.log("direction",e.direction)  //移动的方向
		console.log("srcEvent",e.srcEvent)  //事件来源
		console.log("rotation",e.rotation) //旋转（deg）
		console.log("eventType",e.eventType)  //事件类型，匹配INPUT常量
	}}
>
  ....
</Hammer>

详细可供参考该网址：https://www.dazhuanlan.com/2019/09/24/5d89811e3c924/

在 javaScript 中如何使用 hammer.js

首先是下载其中的hammer.js文件，然后将其引入自己的HTML页面中

<script src="js/hammer.min.js"></script>

或者：
引入CND 引入网络文件

<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>

使用方法：
将Hammer.js引入页面后，我们可以创建一个Hammer实例对象，然后设置各种手势动作事件，指定对应的执行函数，代码如下：

<script>
	var hammertime = new Hammer(document.getElementById('test'));
	hammertime.on('pan', function(ev) {  //pan 相当于 onPan
	    console.log(ev); //输出拖移事件对象
	});
</script>

事件属性有：

事件	说明
pan	触摸滑动事件
tap	点击事件
press	长按事件
pinch	缩放事件
swipe	滑动事件
rotate	旋转事件
注意：
事件触发：多个手指在按压平时的状态下旋转，旋转事件默认为关闭，使用时请执行下列代码段。

hammerTest.get('pinch').set({ enable: true });

知道这些你就可以快速的使用hammer插件来实现你的手势监控了