反应无限滚动机制

Question

我需要在react项目中实现无限滚动机制，当我到达页面底部时，需要在Gallery组件的images数组中添加更多图像。

问题在于它只会发生一次，只有在第一次滚动到页面底部时才会发生。

添加我的功能的图片：scrolling functions

感谢您的帮助！

Answer 1

您应该监听componentDidMount 中的scrool事件，而只能监听componentDidMount中的removeListner，我还注意到您在轨道滚动功能中删除监听器不只是适得其反？尝试删除该行

Answer 2

您可以做的是为无限滚动行为创建一个自定义挂钩。这样您就可以轻松地在应用程序中的多个位置重用代码。您必须考虑该挂钩的输入/输出：

• 输入：

• 1. 回调以获取更多项目，
• 2. 当回调到达底部时要监视的元素

• 输出

• 1. 列表是否正在加载（以便您可以显示微调器）

您可以依靠路口观察员为您完成繁重的工作。现代浏览器通常应该支持它。

我最近创建了一篇关于该主题的文章，如果您想查看它here，其中详细介绍了它