Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

王兄增加个移动端是阔值手势吧 #52

Open
hanwenbo opened this issue Jan 7, 2022 · 1 comment
Open

王兄增加个移动端是阔值手势吧 #52

hanwenbo opened this issue Jan 7, 2022 · 1 comment
Labels

Comments

@hanwenbo
Copy link

hanwenbo commented Jan 7, 2022

我临时写了一个,最近写api接口,没时间维护前端,这个还得你专业

根据手势的位移阔值 来判断上下左右,方便用户直接使用,做翻页

import {useState} from 'react';
import {useDebouncedCallback} from 'use-debounce';
import {useDrag} from '@use-gesture/react';

export default () => {
  const [dragScrolled, setDragScrolled] = useState(0);
  const [direction, setDirection] = useState<null | 'up' | 'down'>(null);
  const theshold = 10
  const bind = useDrag(
    ({
       first,
       last,
       velocity: [, vy],
       direction: [, dy],
       movement: [, my],
     }) => {
      if (first) {
        setDragScrolled(my)
      }
      if (last) {
        updateScroll(dy, my)
      }
    }
  );
  const updateScroll = useDebouncedCallback(
    (dy, y) => {
      if (Math.abs(dragScrolled - y) > theshold) {
        setDirection(
          dy > -1 ? 'up' : 'down',
        );
        setDragScrolled(y + dragScrolled);
      }
    },
    100,
    {maxWait: 100},
  );
  return [bind, direction]
};

@hanwenbo hanwenbo added the ✨ Feature Request 新需求 label Jan 7, 2022
@wangxingkang
Copy link
Member

ok

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants