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

问题描述

我是一名初级开发人员，正在为一个问题而苦苦挣扎，因为该页面顶部有一个带有大约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>
        </Wrapper>
        <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>
      </Container>
    </Well>
  )
}

解决方法

在更多研究中，“反应可擦拭” 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>

,

由于您未提供任何代码段或源代码，因此下面是一些基本示例。它应该让您入门。

const name = ["Bob","Tom","Larry"],age =  ["10","20","30"],indices = Array.from(name.keys())
                     .sort( (a,b) => name[a].localeCompare(name[b]) ),sortedName = indices.map(i => name[i]),sortedAge = indices.map(i => age[i])

console.log(indices)
console.log(sortedName)
console.log(sortedAge)

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