Question

我正在尝试在我的应用中实现一些滑动功能，但我正在努力获得我想要的正确行为。

我有一个名为onTouchStart的函数，它将当前触摸对象的clientX和clientY位置保存到状态，如下所示：

touchStart(e) {
    const touchObj = e.touches[0];
    this.setState({
        startX: touchObj.clientX,
        startY: touchObj.clientY,
    })
}

用户开始在屏幕上移动手指后，我会调用另一个功能onTouchMove，这会保存当前的clientX和clientY位置：

touchMove(e) {
    const touchObj = e.touches[0];
    this.setState({
        currentX: touchObj.clientX,
        currentY: touchObj.clientY,
    })
}

然后要确定滑动是up还是down滑动，我会调用另一个获取起始位置并取走当前位置的函数。我还将其与threshold 150进行比较，以确保它是实际的滑动，而不是长滑动（如滚动）。这是看起来像：

touchEnd(e) {
    this.setState({
        touchStarted: false,
    })
    if (Math.abs(this.state.startX - this.state.currentX) < this.state.threshold) {
        this.setState({
            direction: this.state.startY > this.state.currentY ? "top" : "bottom",
        })
        console.log(this.state.direction);
    }
}

问题

这可以很好地检测up和down滑动，但在用户第一次滑动时，console.log会返回原始状态none（而不是{{ 1}}或up）。

如何确保初始滑动始终设置为正确的方向？

问题还在继续，用户必须在相反的方向上滑动两次才能将状态保存到正在滑动的实际方向，如下所示：

up // none
up // up
向下//向上
下来//下来

如果我没有很好地表达我的问题，请道歉。 Here's a link to a CodePen您可以在其中更详细地查看问题（您需要手机或模拟器才能看到触摸事件）。

这也是a link to a post，我一直在关注这项功能。

任何指针都将受到高度赞赏。谢谢！

Answer 1

以下是固定pen的链接。

touchEnd(e) 
{
    var s = {
      touchStarted: false
    };

    if (Math.abs(this.state.startX - this.state.currentX) < this.state.threshold) 
    {
        s.direction = this.state.startY > this.state.currentY ? "top" : "bottom";
    }

    this.setState(s, () => console.log(this.state.direction))
}

唯一的“问题”是你假设setState是同步的，因此在调用后立即检查状态值，而不是。如果要在setState完成后检查状态值，请使用其第二个参数传递回调函数。

React JS滑动功能无法按预期工作

问题

1 个答案: