reactjs - 拖放行为在 useGesture 上

问题描述

我正在使用 react-use-gesture 沿 x 轴拖动 div。它没有做任何花哨的事情，只是存储移动x值并使用它来抵消leftdiv 的 css 属性。代码使用useState钩子来存储累积的 x 偏移量，并且状态的设置会触发重新渲染。

此处示例：https://3upld.csb.app/ ( https://codesandbox.io/embed/react-usegesture-test-forked-3upld?file=/src/index.js&codemirror=1 )

下面的代码

export default function Home() {
  const [offset, setOffset] = useState(0);

  const bind = useGesture(
    {
      onDrag: ({ movement: [mx] }) => {
        console.log("x", mx);
        setOffset(mx);
      }
    },
    {
      drag: {
        initial: () => [offset, 0]
      }
    }
  );
  return (
    <>
      <h1 className="font-bold text-3xl">React useGesture test</h1>
      <div className="relative">
        <div
          {...bind()}
          className="absolute bg-red-600 h-48 w-48"
          style={{ left: `${100 + offset}px` }}
        >
          Box
        </div>
      </div>
    </>
  );
}

当我查看这个浏览器时，它工作得很好——我可以四处拖动。当我将浏览器切换到仿真时，它不会拖动超过几个像素。请参阅下面的示例 gif。

我也在 Android 手机上的 Chrome（出现问题）和 iPad Pro 上的 Safari（如果我缓慢拖动不会出现问题）上对此进行了测试。

有谁知道为什么这在移动设备上运行不顺畅？谢谢

标签： reactjsgesturereact-use-gesture

reactjs - 拖放行为在 useGesture 上

问题描述

解决方案

推荐阅读