如何在 React 中滑动拖动旋转木马

Question

我是一名初级开发人员，正在努力解决页面顶部有一个带有大约 10 张卡片的轮播的问题。并非所有的卡片都可以同时显示在屏幕上，所以角落里有 2 个箭头可以滚动它们（左箭头和右箭头）。当您单击向右箭头时，卡片会滚动到末尾，当您单击向左箭头时，它们会从右向左向后移动。当您按下鼠标并按住图像并拖动它们时，我怎样才能使它们向左或向右移动？我需要让它们不仅通过单击箭头而且还通过鼠标拖动移动...我是否需要使用一些库（我找到了 react-hammerjs，但没有找到任何好的文档/示例如何使用它）？预先感谢您的帮助这里有一些代码可供参考：export const CardsBlock = () => {  const scrollContainer = useRef(null)  const [scrolled, setScrolled] = useState(false)  const dispatch = useDispatch()  useEffect(() => {    const resizeListener = (e) => {      if (e.target.outerWidth <= sizes.mobile) {        setScrolled(null)      } else {        setScrolled(false)      }    }    window.addEventListener('resize', resizeListener)    return () => {      window.removeEventListener('resize', resizeListener)    }  }, [])  useEffect(() => {    if (scrolled) {      scrollTo(scrollContainer.current, scrollContainer.current.offsetWidth)    } else {      scrollTo(scrollContainer.current, 0)    }  }, [scrolled])  return (    <Well>      <Container>        <Wrapper padding={'0 0 16px'} justify={'space-between'} align={'center'}>          <TitleText width={'auto'}>{translator('specilization.title', true)}</TitleText>          <ArrowsContainer>            <Icon              onClick={() => setScrolled(false)}              cursor={'pointer'}              type={'arrow_left'}              color={scrolled ? 'black4' : 'black1'}            />            <Icon              onClick={() => setScrolled(true)}              cursor={'pointer'}              type={'arrow_right'}              color={scrolled ? 'black1' : 'black4'}            />          </ArrowsContainer>

Answer 1

由于您没有提供任何片段或源代码，这里是一些基本示例。它应该让你开始。

const slider = document.querySelector('.items');

let isDown = false;

let startX;

let scrollLeft;

slider.addEventListener('mousedown', (e) => {

  isDown = true;

  startX = e.pageX - slider.offsetLeft;

  scrollLeft = slider.scrollLeft;

});

slider.addEventListener('mouseleave', () => {

  isDown = false;

});

slider.addEventListener('mouseup', () => {

  isDown = false;

});

slider.addEventListener('mousemove', (e) => {

  if(!isDown) return;

  e.preventDefault();

  const x = e.pageX - slider.offsetLeft;

  const walk = (x - startX) * 3; //scroll-fast

  slider.scrollLeft = scrollLeft - walk;

});

https://codepen.io/toddwebdev/pen/yExKoj

Answer 2

在更多研究中，在“react-swipeable”npm 模块中找到了答案 https://www.npmjs.com/package/react-swipeable

由于此处已经定义了箭头图标的 onclick 逻辑，因此添加了相同的逻辑来响应可滑动组件：

      <Swipeable onSwipedLeft={() => setScrolled(true)} onSwipedRight={() => setScrolled(false)} trackMouse={true}>

        <SpecializationsInnerContainer ref={scrollContainer}>

          {specializations.map((specialization) =>

            <SpecializationCard

              key={specialization.id}

              image={specialization.image}

              title={specialization.title}

              color={'black1'}

              borderColor={'transparent'}

              onClick={() => handleOnClick(specialization.id)}

            />

          )}

          <SpecializationCard borderColor={'black15'} image={'image.png'} isAll onClick={openSpecializationFilter} title={translator('specilization.all', true)} color={'transparent'}/>

        </SpecializationsInnerContainer>

       </Swipeable>