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

英文 | 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 秒后生成新项目

总结

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

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

学习更多技能

请点击下方公众号

如何使用 React 编写无限滚动列表相关推荐

Unity3D 无限滚动列表
在游戏开发的过程中,会经常用到无限滚动列表做一些界面的展示,像排行榜,房间列表,好友列表,装备列表等等,GitHub有个非常好用的无限滚动列表,这个滚动列表是基于UGUI的,所以需要创建一个UGUI的 ...
UGUI无限滚动列表
正在忙别的东东,突然公司来了个需求,要加个什么无限滚动列表需求,再三确认,没错他就要这个(心想这玩意都烂大街,分分钟给你复制粘贴一个),然后就找啊找,找了一堆,没有找到正好对应需求的,然后找了个靠近需 ...
微信小程序实现无限滚动列表
实现方式是利用小程序原声组件swiper,方向设置为纵向 :vertical='true'设置同时显示的滑块数量:display-multiple-items='4'设置自动轮播:autoplay:' ...
使用 GraphQL 无限滚动
在构建为用户提供一长串信息的应用程序时,例如新闻提要.论坛中的帖子或聊天应用程序中的消息,我们的目标是向用户显示合理数量的信息. 用户开始滚动浏览初始列表后,Web 客户端应立即加载更多内容以继续向用 ...
深入Flutter（四） Infinite scrolling -- 无限滚动
文章系列深入Flutter(一) 积极推进"组合"方式深入Flutter(二) 线性时间复杂度的 build 和 layout 深入Flutter(三) Element树和Re ...
微信小程序 - 新闻动态 / 公告上下滚动列表（上下循环滚动，无限上下自动滚动列表）
前言本文实现了无限上下自动滚动列表组件,常见于新闻动态列表.公告等场景,可直接调用. 您可以自定义滚动间隔与显示多少个列表, 另外点击每项会触发事件,可用于跳转到详情页. 代码干净整洁,注释详细 ...
CSS3实现列表无限滚动/轮播
使用CSS3实现列表的无限滚动/轮播效果预览思路将当前列表滚动至最后一项的末尾,然后瞬间切换回第一项问题点用什么方式实现无限轮播这个问题就是列表滚动到最后时底部会留白(有多余空间)如何处理 ...
微信小程序滚动列表（无限滚动）
效果图1.0 实现方式是利用小程序原声组件swiper,方向设置为纵向 :vertical='true'设置同时显示的滑块数量:display-multiple-items='4'设置自动轮播:aut ...
当前元素_90行代码，15个元素实现无限滚动
前言在本篇文章你将会学到: IntersectionObserver API 的用法,以及如何兼容. 如何在React Hook中实现无限滚动. 如何正确渲染多达10000个元素的列表. 无限下拉加 ...

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

如何使用 React 编写无限滚动列表相关推荐

最新文章

热门文章