如何使用 React 编写无限滚动列表

14dc29990ff4b418e966c80680471f3f.png

英文 | https://javascript.plainenglish.io/how-to-write-an-infinite-scroll-list-with-react-6565c775aef6

翻译 | 杨小爱

当您不知道页面大小时，无限滚动是合适的。您的项目在流中（例如，时间线）。唯一的机会是按顺序显示项目。然后实现无限滚动可用性的最佳方式。我写了一个简单的模拟，当用户访问滚动的最后一个东西时加载新项目。示例小程序链接：https://onurdayibasi.dev/infinite-scroll/v1

1f7e7127d618ac7397d5288f0854896e.png

首先，我们需要一个具有固定高度和溢出 y 滚动能力的列表容器。

b2b5c4185de6a9b2f6ebf24a755c121a.png

第二部分是信息卡项目和一个加载元素。加载元素仅在获取操作活动时可见。

9216e7e969d1cff895cbbf0e13fc78fc.png

滚动机制

当组件挂载到应用程序时，我们将滚动侦听器添加到“infinite-scroll-container”并在元素卸载时将其删除。

0266486dbcc14ed83e1c025350b0559d.png

这里最重要的部分是“轨道滚动”我们将在轨道滚动中做什么？

  • 检查您是否访问了滚动区域的底部。

  • 如果访问，则从后端获取新的数据块

  • 并生成新项目并将它们渲染到列表容器中

72ed36b2f2a642aafbc7811b2ea91727.png

检查滚动访问最后一个元素

我们在 document.getElementById 的帮助下获取 DOM 元素。之后，我们计算滚动访问底部。如果滚动到底部并获取 false，那么我们开始获取操作。

if (el.offsetHeight + el.scrollTop >= el.scrollHeight)

c7ab9e11f9baa393205906630ed71e75.png

然后，我写了一个简单的伪获取函数，它在等待 0.6 秒后生成新项目

754f85f39d2f67ae29167b828369f5a6.png

总结

本文分享的这个列表希望对你有所帮助，最后，感谢你的阅读。

如果您觉得这个对您有所帮助，也请您分享给您身边做开发的朋友，谢谢。

学习更多技能

请点击下方公众号

d7a8e663756d253c10b181acf9ad2560.gif

b7ba9e52b22a16c9c7b41fdea6d086e0.png

634847c7d2e1f3a726cb1adab0638198.png