react-use-gesture

react-use-gesture

需求

• requestAnimationFrame

使用

import React from 'react'

import { View } from '@tarojs/components'

import { useDrag } from 'react-use-gesture'

import { useGestureConfig } from '@tarojsx/library/dist/react-use-gesture'

const Demo = () => {

const [gestureConfig, containerProps] = useGestureConfig()

const bind = useDrag(({ down, movement: [mx, my], direction: [xDir, yDir], distance, cancel }) => {

console.log('按下', down)

console.log('轴移动距离', mx, my)

console.log('轴移动方向', xDir, yDir)

console.log('直线移动距离', distance)

console.log('取消拖动操作', cancel)

}, gestureConfig)

return <View {...containerProps}>{<View {...bind()} />}</View>

}

⬅ 拖拽图片 ➡

参数	说明	类型	默认值
id?	容器元素 ID	string	uuid
ref?	React ref

返回值	说明	类型
[0]	gestureConfig: 传给 react-use-gesture hooks 的配置	{}
[1]	containerProps: 需要绑定在容器元素上的属性