响应JS的滑动功能不像预期的那样工作

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 of 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的原始状态(与up或down相反)。

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

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

向上//无

向上//向上

降/升

降/降/降

如果我没有把我的问题说得太清楚的话，很抱歉。在这里有一个指向CodePen的链接中，您可以更详细地看到问题(您需要一个电话或模拟器来查看触摸事件)。

这里还有一个与帖子的链接，我一直在跟踪它，以使这个功能正常工作。

任何指示都将不胜感激。谢谢!

Answer 1

这是指向固定钢笔的链接。

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完成后检查状态的值--使用它的第二个参数传递回调函数。