如何在 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) => {&nbsp; isDown = true;&nbsp; startX = e.pageX - slider.offsetLeft;&nbsp; scrollLeft = slider.scrollLeft;});slider.addEventListener('mouseleave', () => {&nbsp; isDown = false;});slider.addEventListener('mouseup', () => {&nbsp; isDown = false;});slider.addEventListener('mousemove', (e) => {&nbsp; if(!isDown) return;&nbsp; e.preventDefault();&nbsp; const x = e.pageX - slider.offsetLeft;&nbsp; const walk = (x - startX) * 3; //scroll-fast&nbsp; slider.scrollLeft = scrollLeft - walk;});https://codepen.io/toddwebdev/pen/yExKoj

Answer 2

在更多研究中，在“react-swipeable”npm 模块中找到了答案&nbsp;https://www.npmjs.com/package/react-swipeable由于此处已经定义了箭头图标的 onclick 逻辑，因此添加了相同的逻辑来响应可滑动组件：&nbsp; &nbsp; &nbsp; <Swipeable onSwipedLeft={() => setScrolled(true)} onSwipedRight={() => setScrolled(false)} trackMouse={true}>&nbsp; &nbsp; &nbsp; &nbsp; <SpecializationsInnerContainer ref={scrollContainer}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {specializations.map((specialization) =>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <SpecializationCard&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={specialization.id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; image={specialization.image}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title={specialization.title}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color={'black1'}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderColor={'transparent'}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={() => handleOnClick(specialization.id)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <SpecializationCard borderColor={'black15'} image={'image.png'} isAll onClick={openSpecializationFilter} title={translator('specilization.all', true)} color={'transparent'}/>&nbsp; &nbsp; &nbsp; &nbsp; </SpecializationsInnerContainer>&nbsp; &nbsp; &nbsp; &nbsp;</Swipeable>