@use-gesture
安装
npm i @use-gesture/vanilla -S
npm i @use-gesture/react -S // for React
实例
Vanilla javascript
DragGesture |
Handles the drag gesture |
|---|---|
MoveGesture |
Handles mouse move events |
HoverGesture |
Handles mouse enter and mouse leave events |
ScrollGesture |
Handles scroll events |
WheelGesture |
Handles wheel events |
PinchGesture |
Handles the pinch gesture |
Gesture |
Handles multiple gestures in one hook |
import { Gesture, DragGesture, MoveGesture } from '@use-gesture/vanilla';
// 拖拽实例
const dragGesture = new DragGesture(el, ({ delta: [dx, dy] }) => {
...
}, options);
// 移动实例
const dragGesture = new MoveGesture(el, () => {
...
}, options);
// 多手势交互实例
const gesture = new Gesture(
$container,
{
onHover: handleHover,
onMove: handleMove,
},
{
move: { enabled: false }, // move gesture
...
},
);
options
支持通过 setConfig(options) 更新 options 配置
enabled：手势是否开启
state
xy：值为数组 [x,y]，即指针位置或滚动偏移量
delta：值为数组[dx, dy]，移动差值，即指针移动/滚动差值
active：当前手势行为是否处于激活状态（boolean）
