一款美轮美奂的JavaScript 小项目

大家好，我是TJ

一个励志推荐10000款开源项目与工具的程序员

周末啦，TJ君给大家介绍1款有意思的JavaScript 项目放松一下。

use-gesture

这是一款通过事件绑定来让鼠标和触摸手势变得更加丰富多彩的React库。

而且不需要太多的复杂代码只需要很简单的几行就够了。

小伙伴们可以单独使用，也可以和react-spring这样的库一起使用。

如何安装

• React

代码语言：javascript复制

#Yarn
yarn add @use-gesture/react

#NPM
npm install @use-gesture/react

• Vanilla javascript

代码语言：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

代码语言：javascript复制

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 <animated.div {...bind()} style={{ x, y, touchAction: 'none' }} />
}

• javascript

代码语言：javascript复制

<!-- index.html -->
<div id="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中处理多个手势

是不是挺有意思的，那就赶紧来试试吧：

spring react java javascript springcloud

0 人点赞