react js中的滑动效果

Question

我正在尝试使用 React 创建一个滑动事件。 我不想使用任何外部组件或 jquery。

css 类似于：

.outter{
  position:relative;
  width: 100%;
  height: 150px;
  background-color: blue;
}

.inner{
  position: absolute;
  width: 1000%; 
  left: 50px;
}
.child{
  float: left;
  margin-right: 15px;
}

在反应组件中，我正在尝试执行以下操作：

class Test extends React.Component {
    constructor(props){
    super(props);

    this.state = {
        left: 0
    }
  }

  handleSwipe(){
    this.setState({left: -350})
  }

  render(){
    return(
        <div className="outter">
            <div className="inner" style={{left: this.state.left}} onSwipe={this.handleSwipe.bind(this)}>
                 <div className="child"><img src="http://placehold.it/350x150" /></div>
                 <div className="child"><img src="http://placehold.it/350x150" /></div>
                 <div className="child"><img src="http://placehold.it/350x150" /></div>
                 <div className="child"><img src="http://placehold.it/350x150" /></div>
            </div>
      </div>
    )
  }
}

React.render(<Test />, document.getElementById('container'));

如何识别滑动事件？

如果我在我的示例中而不是onSwipe添加onClick它可以工作，但是如何制作滑动效果？

这是jsfiddle 。

Answer 1

您可以向 React 组件添加onTouch事件处理程序：

onTouchStart={touchStartEvent => this.handleTouchStart(touchStartEvent)}
onTouchMove={touchMoveEvent => this.handleTouchMove(touchMoveEvent)}
onTouchEnd={() => this.handleTouchEnd()}

您可能还想为鼠标事件添加事件处理程序以实现跨平台兼容性：

onMouseDown={mouseDownEvent => this.handleMouseDown(mouseDownEvent)}
onMouseMove={mouseMoveEvent => this.handleMouseMove(mouseMoveEvent)}
onMouseUp={() => this.handleMouseUp()}
onMouseLeave={() => this.handleMouseLeave()}

您有在事件处理程序中更新状态的left属性的正确想法，但是如果您希望滑动功能感觉自然，您需要通过更新left来跟踪指针的位置（无论是鼠标还是触摸）使用事件的clientX属性。

为此，您需要存储第一次触摸的位置并将left设置为等于触摸位置的变化。 为了增加真实感，您还可以跟踪触摸的速度并在触摸完成后继续为组件设置动画。

这是我为从列表中删除项目而制作的快速肮脏的 Codepen：

https://codepen.io/swingthing/pen/ZBGBJb/

Answer 2

我使用上面好的解决方案作为构建我需要的基础。 也许有人需要这样的东西。 想法是在滑动效果上左右移动我的自定义滑块。 如果您希望它更灵敏，请将 150 调整为 75。

const [touchStart, setTouchStart] = React.useState(0);
const [touchEnd, setTouchEnd] = React.useState(0);

function handleTouchStart(e) {
    setTouchStart(e.targetTouches[0].clientX);
}

function handleTouchMove(e) {
    setTouchEnd(e.targetTouches[0].clientX);
}

function handleTouchEnd() {
    if (touchStart - touchEnd > 150) {
        // do your stuff here for left swipe
        moveSliderRight();
    }

    if (touchStart - touchEnd < -150) {
        // do your stuff here for right swipe
        moveSliderLeft();
    }
}

Answer 3

可能对某人我的解决方案也很有用：

export const useSwipe = ({left, right, up, down}: {left?: () => void; right?: () => void; up?: () => void; down?: () => void;}) => {
  const touchCoordsRef = useRef({touchStart: {x: 0, y: 0, time: Date.now()}});
  const fnsRef = useRef({up, down, left, right});
  fnsRef.current = {
    up,
    left,
    down,
    right,
  };
  useEffect(() => {
    const handleTouchStart = (e: TouchEvent) => {
      touchCoordsRef.current.touchStart.x = e.targetTouches[0].clientX;
      touchCoordsRef.current.touchStart.y = e.targetTouches[0].clientY;
      touchCoordsRef.current.touchStart.time = Date.now();
    };
    const handleTouchEnd = (e: TouchEvent) => {
      const threshold = 150;
      const swipeSpeed = 1; // sec;
      const touchEndX = e.changedTouches[0].clientX;
      const touchEndY = e.changedTouches[0].clientY;
      const touchStartX = touchCoordsRef.current.touchStart.x;
      const touchStartY = touchCoordsRef.current.touchStart.y;
      const elapsedTime = (Date.now() - touchCoordsRef.current.touchStart.time) / 1000;
      if(elapsedTime > swipeSpeed) {
        return;
      }
      const xDistance = touchStartX - touchEndX;
      const yDistance = touchStartY - touchEndY;

      if(Math.abs(xDistance) < threshold && Math.abs(yDistance) < threshold) {
        return;
      }

      if(Math.abs(xDistance) >= Math.abs(yDistance)) {
        xDistance > 0 ? fnsRef.current.right?.() : fnsRef.current.left?.();
      } else {
        yDistance > 0 ? fnsRef.current.down?.() : fnsRef.current.up?.();
      }
    };
    window.addEventListener('touchstart', handleTouchStart);
    window.addEventListener('touchend', handleTouchEnd);
    return () => {
      window.removeEventListener('touchstart', handleTouchStart);
      window.removeEventListener('touchend', handleTouchEnd);
    };
  });
};

Answer 4

刚刚找到一个可能有用的 DOM 事件。 将 .ontouchend 添加到您的 HTML 标记以检测源自该标记的任何滑动事件。

https://www.w3schools.com/jsref/event_touchend.asp - 参考