Блог

Я реализовывал карусель с помощью chakra ui react для проекта с открытым исходным кодом. Кажется, все работает так, как ожидалось, но, пробуя его на мобильных устройствах, я сразу заметил что-то не так:

• Касание перемещает карту вправо, даже если мы перемещаем касание вверх или вниз?

Пока я изучаю событие запуска или завершения касания специально для мобильных устройств, но я не имею ни малейшего представления о том, как оценить направление перемещения касания.

Вот код прослушивателей событий, реализованный и назначенный flex:

 const handleDragStart = () => setDragStartPosition(positions[activeItem]);

  const handleDragEnd = (_, info) => {
    const distance = info.offset.x;
    const velocity = info.velocity.x * multiplier;
    const direction = velocity < 0 || distance < 0 ? 1 : -1;

    const extrapolatedPosition =
      dragStartPosition  
      (direction === 1
        ? Math.min(velocity, distance)
        : Math.max(velocity, distance));

    const closestPosition = positions.reduce((prev, curr) => {
      return Math.abs(curr - extrapolatedPosition) <
        Math.abs(prev - extrapolatedPosition)
        ? curr
        : prev;
    }, 0);

    if (!(closestPosition < positions[positions.length - constraint])) {
      setActiveItem(positions.indexOf(closestPosition));
      controls.start({
        x: closestPosition,
        transition: {
          velocity: info.velocity.x,
          ...transitionProps
        }
      });
    } else {
      setActiveItem(positions.length - constraint);
      controls.start({
        x: positions[positions.length - constraint],
        transition: {
          velocity: info.velocity.x,
          ...transitionProps
        }
      });
    }
  };
 

Пример CodeSandbox: https://codesandbox.io/s/dd8vn