我想在滚动位置触发重新加载功能。我将下面的代码设置为在 contentOffset.y 小于 -180 时触发重新加载,但随着 contentOffset.y 的位置不断变化,它会被多次触发。
如何确保只触发一次重新加载?
_onScroll = (event) => {
if (event.nativeEvent.contentOffset.y < -180) {
this.webView.ref && this.webView.ref.reload();
console.log("Triggered multiple times as event.nativeEvent.contentOffset.y is keep changing")
}
};
这是获取滚动位置的 WebView。
<WebView
bounces={true}
onScroll={this._onScroll}
/>
最佳答案
您需要一种方法来告诉您的组件您已经运行了滚动重新加载,然后仅在之前未运行过的情况下运行重新加载功能。 执行此操作的最佳方法是在组件的状态下:
_onScroll = (event) => {
if (event.nativeEvent.contentOffset.y < -180) {
!this.state.scrollReloaded && this.webView.ref && this.webView.ref.reload();
this.setState({ scrollReloaded: true });
}
};
上述解决方案有效但性能不佳; _onScroll
仍然会在我们每次滚动时被调用。这为您提供了额外的灵 active ,但对 CPU 的要求更高。为了稍微更好的性能,您可以添加:
<WebView
bounces={true}
onScroll={e => !this.state.scrollReloaded && this._onScroll(e)}
/>
关于javascript - react native Webview : How to trigger function once on onScroll?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62414833/