React如何实现触摸滑动事件，可以区分方向的那种！onTouchMove只要一拖动就会触发？

Question

React如何实现触摸滑动事件，可以区分方向的那种！因为onTouchMove只要一拖动就会触发，好像没有办法区分滑动方向？

Answer 1

没有现成的告诉你上下左右的属性，需要自己判断。onTouchStart 的时候记录初始 e.pageX 和 e.pageY，onTouchMover 的时候拿移动后的 e.pageX 和 e.pageY 与 onTouchStart 的时候的值相减就能知道了，同时还要更新初始值方便下一次再次对比。

Answer 2

确实如@公子 所说，没什么native的方式告诉你，不过javascript社区最不缺的就是库，有小哥做了一个东西，或许能帮你：

react-gestures

Answer 3

不知道有没有解决。react-gestures这个react组件怎么在react里面调用，有没有什么例子啊，急用，谢谢了

Answer 4

结合onTouchStart,onTouchMove和onTouchEnd即可判断方向。
举例如下,这里只写了判断是左移动还是右移动。上移和下移原理一样,存clientY即可。

class TouchTest extends Component{

state={
  touchStartX:0,
  touchEndX:0,
}
render()
{
    <div onTouchStart={(e)=>{
    this.setState({
    touchStartX:e.touches[0].clientX
})
}}
    onTouchMove={(e)=>{
    this.setState({
        touchEndX:e.touches[0].clientX
 })
}}

    onTouchEnd={()=>{
        let {touchStartX,touchEndX}=this.state;
        let dis=touchEndX-touchStartX;
        if(dis==0)return;
        let isLeft=dis<0;
        console.log(isLeft?"左移动":"右移动");
}}
>
</div>
}
}