Skip to content

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

Description

@hanwenbo

我临时写了一个,最近写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]
};

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions