一款美轮美奂的JavaScript 小项目
公众号程序猿DD
共 1692字，需浏览 4分钟
·
2021-12-09 11:08
大家好，我是TJ
一个励志推荐10000款开源项目与工具的程序员
周末啦，TJ君给大家介绍1款有意思的JavaScript 项目放松一下。
use-gesture
这是一款通过事件绑定来让鼠标和触摸手势变得更加丰富多彩的React库。
而且不需要太多的复杂代码只需要很简单的几行就够了。
小伙伴们可以单独使用，也可以和react-spring这样的库一起使用。
如何安装
React
#Yarn
yarn add @use-gesture/react
#NPM
npm install @use-gesture/react
Vanilla javascript
#Yarn
yarn add @use-gesture/vanilla
#NPM
npm install @use-gesture/vanilla
效果示例
可以先来看下实际的效果：
如果您正在学习Spring Cloud，推荐一个经典教程（含Spring Cloud Alibaba）：https://blog.didispace.com/spring-cloud-learning/
如何使用
react
import { useSpring, animated } from '@react-spring/web'
import { useDrag } from '@use-gesture/react'
function Example() {
const [{ x, y }, api] = useSpring(() => ({ x: 0, y: 0 }))
// Set the drag hook and define component movement based on gesture data
const bind = useDrag(({ down, movement: [mx, my] }) => {
api.start({ x: down ? mx : 0, y: down ? my : 0 })
})
// Bind it to a component
return bind()} style={{ x, y, touchAction: 'none' }} />
}
javascript
"drag" />
// script.js
const el = document.getElementById('drag')
const gesture = new DragGesture(el, ({ active, movement: [mx, my] }) => {
setActive(active)
anime({
targets: el,
translateX: active ? mx : 0,
translateY: active ? my : 0,
duration: active ? 0 : 1000
})
})
// when you want to remove the listener
gesture.destroy()
不同效果的HOOKS
useDrag 处理拖动手势
useMove 处理鼠标移动事件
useHover 处理鼠标进入和鼠标离开事件
useScroll 处理滚动事件
useWheel 处理滚轮事件
usePinch 处理捏手势
useGesture 在一个hook中处理多个手势
是不是挺有意思的，那就赶紧来试试吧：
点击下方卡片，关注公众号“TJ君”
回复“gesture”，获取仓库地址
关注我，每天了解一个牛x、好用、有趣的东东
往期推荐
评论