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

web前端开发

共 853字,需浏览 2分钟

 · 2021-11-27

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

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

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

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

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

这里最重要的部分是“轨道滚动”我们将在轨道滚动中做什么?
  • 检查您是否访问了滚动区域的底部。

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

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



检查滚动访问最后一个元素
我们在 document.getElementById 的帮助下获取 DOM 元素。之后,我们计算滚动访问底部。如果滚动到底部并获取 false,那么我们开始获取操作。
if (el.offsetHeight + el.scrollTop >= el.scrollHeight)
然后,我写了一个简单的伪获取函数,它在等待 0.6 秒后生成新项目

总结
本文分享的这个列表希望对你有所帮助,最后,感谢你的阅读。
如果您觉得这个对您有所帮助,也请您分享给您身边做开发的朋友,谢谢。

学习更多技能
请点击下方公众号

浏览 41
点赞
评论
收藏
分享

手机扫一扫分享

举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

举报