React：为什么只有在使用 Chrome 浏览器时，我的移动幻灯片上的灵敏度才会混乱？

Question

我的 React Web 应用程序上有一个轮播组件。它在 Firefox 上工作得很好，但是在 Chrome 中，当我在移动设备上向下滑动页面时，它认为我正在水平滑动并在幻灯片放映中切换幻灯片。我正在使用一个名为 react-material-ui-carouse 的库，它可用于滑动的唯一道具是将滑动功能设置为 true 或 false。我在文档中找不到任何关于调整幻灯片灵敏度的提及。有没有合理的方法可以解决这个问题，或者我最好不要使用这个库？如果您想在移动设备上尝试一下以了解我的意思，请链接到该网站。

幻灯片.jsx

function Slideshow() {
  const fadeImages = [
    {
      src: "/images/allie-pic.webp",
      title: "First Slide",
      caption:
        "Slide1",
    },
    {
      src: "/images/image-2.jpg",
      title: "Second Slide",
      caption:
        "Slide2",
    },
    {
      src: "/images/image-3.webp",
      title: "Third Slide",
      caption:
        "Slide3",
    },
  ];

  return (
    <Carousel
      swipe={true}
      autoPlay={false}
      fullHeightHover={false}  
     
    >
      {fadeImages.map((img, i) => (
        <Item key={i} img={img} />
      ))}
    </Carousel>
  );
}

function Item({ img }) {
  return (
    <Stack alignItems="center">
      <Typography variant="h1">
        {img.title}
      </Typography>
      <Typography variant="body1">{img.caption}</Typography>
      <img     
        src={img.src}
      ></img>
    </Stack>
  );
}
export default Slideshow;

Answer 1

react-material-ui-carousel

库中水平滑动的灵敏度或触摸处理似乎并不适合所有用例，特别是当用户的意图是向下或向上滚动时。

自定义事件处理：您可以尝试向组件添加自定义触摸事件侦听器，以区分垂直滑动（滚动）和水平滑动。如果垂直移动明显大于水平移动，您可以防止水平滑动被记录。

这是一个非常基本的示例：

function Slideshow() {
    const carouselRef = useRef(null);

    useEffect(() => {
        let startX = 0;
        let startY = 0;

        const handleTouchStart = (e) => {
            startX = e.touches[0].clientX;
            startY = e.touches[0].clientY;
        };

        const handleTouchMove = (e) => {
            const moveX = e.touches[0].clientX - startX;
            const moveY = e.touches[0].clientY - startY;

            if (Math.abs(moveY) > Math.abs(moveX)) {
                e.preventDefault();
                e.stopPropagation();
            }
        };

        const carousel = carouselRef.current;

        if (carousel) {
            carousel.addEventListener('touchstart', handleTouchStart);
            carousel.addEventListener('touchmove', handleTouchMove);
        }

        return () => {
            if (carousel) {
                carousel.removeEventListener('touchstart', handleTouchStart);
                carousel.removeEventListener('touchmove', handleTouchMove);
            }
        };
    }, []);

    return (
        <div ref={carouselRef}>
            <Carousel /* ... other props ... */>
                {/* ... items ... */}
            </Carousel>
        </div>
    );
}

The idea here is to compare the x and y movements in the touchmove event. If the y movement (vertical) is greater, we prevent the event from propagating, which should theoretically prevent the horizontal swipe.