【问题标题】:How do I check when the user has stopped scrolling?如何检查用户何时停止滚动?
【发布时间】:2016-10-11 21:55:39
【问题描述】:

我正在使用https://facebook.github.io/react-native/docs/scrollview.html,它有一个方便的onScroll 属性,但是当用户停止滚动时我如何获得?

基本上,我想在用户滚动时隐藏一个按钮,而不是在滚动时显示它。

【问题讨论】:

标签: reactjs react-native


【解决方案1】:

在您的组件状态中,存储您上次收到滚动事件的时间。在您的渲染方法中,检查上次滚动事件发生的时间并决定您的按钮是否应该再次可见。

粗略的例子:

// Observe the scroll events.
<ScrollView onScroll={(e) => {
    this.setState({lastScroll: new Date()})
}} />

// Check if the last scroll happened later than 300ms ago.
if (this.state.lastScroll.getTime() < (new Date()).getTime() - 300) {
    // Render the button.
}

【讨论】:

  • 好主意。
  • 我试过了,结果发现虽然这会使按钮在滚动后 300 毫秒消失,但没有逻辑可以将其恢复,即在您停止滚动以使按钮出现后计时器不会重置再次。您对此有什么建议吗?
  • 在这种情况下,我建议使用setTimeout,它会在 300 毫秒后使用setState({displayButton: true}),并且每次收到滚动事件时,您都会取消超时,并立即重新初始化它。您必须添加一些逻辑来初始显示按钮并在第一次滚动时将其隐藏。
猜你喜欢
  • 2012-02-27
  • 1970-01-01
  • 2018-03-14
  • 1970-01-01
  • 2012-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-07-31
相关资源
最近更新 更多