概述
在前端领域中，无限加载是一种常见的用户体验优化方式。当用户滚动页面到底部时，应用程序会再次向服务器请求数据并展示给用户，这样在不需要用户手动点击页面加载按钮的情况下，用户可以不断浏览更多的内容。
在本文中，我们将介绍如何在 Next.js 应用程序中实现无限加载功能，涵盖了基本的无限加载和页面加载的重点，并提供了示例代码和探讨如何根据不同的需求进行扩展和优化。
实现基本的无限加载
要实现无限加载功能，我们需要先确保我们的数据在服务器上是分页的。这意味着每次向服务器发送请求时，我们需要包含一些参数来指定哪些页面和相应的数据数。如下所示：
// 请求第一页，每页10个元素
fetch(`https://example.com/api/items?page=1&limit=10`)
.then((response) => {
// 处理数据
})当我们有这个分页数据时，我们可以开始实现我们的无限加载功能。我们可以借助 React 中的 useState 和 useEffect hook 来实现。
-- -------------------- ---- -------
------ - --------- --------- - ---- --------
----- ---------- - ---
------ ------- -------- -------------- -
----- ------ -------- - ------------
----- ------- --------- - -------------
------------ -- -
----- ------------- - ----- -- -- -
----- --- - ----- ------
----------------------------------------------------------------
--
----- -------- - ----- -----------
------------------- -- ------------- --------------
--
----------------
-- --------
----- -------------- - -- -- -
----------------- -- ------- - ---
--
------ -
--
----------------- -- -
---- --------------------------------
---
------- --------------------------------------
---
--
-在上面的示例代码中，我们使用 useState 和 useEffect hook 来分别管理列表内容和分页数据。我们使用一个页面变量来跟踪当前加载的页面，并在 useEffect 中使用它来加载更多的项目。
当我们加载新的项目时，我们将其存储在项目 state 中以供后续渲染使用。最后，我们添加了一个简单的按钮，让用户可以手动加载更多项目。
这样就实现了最基本的无限加载功能。用户可以滚动页面到底部时自动加载更多内容，或者可以单击按钮手动加载更多。
处理页面加载中的重点
虽然上面的无限加载示例已经相当完整，但是我们还需要考虑以下几个方面，以便使我们的无限加载更加强大、高效和用户友好：
在加载新的页面时显示加载指示器
每次加载更多项时，我们需要告诉用户发生的事情。我们可以使用一些 UI 动画或指示器来表示页面正在加载中。
-- -------------------- ---- -------
------ - --------- --------- - ---- --------
----- ---------- - ---
------ ------- -------- -------------- -
----- ------ -------- - ------------
----- ------- --------- - -------------
----- ----------- ------------- - ----------------
------------ -- -
----- ------------- - ----- -- -- -
-------------------
----- --- - ----- ------
----------------------------------------------------------------
--
----- -------- - ----- -----------
------------------- -- ------------- --------------
--------------------
--
----------------
-- --------
----- -------------- - -- -- -
----------------- -- ------- - ---
--
------ -
--
----------------- -- -
---- --------------------------------
---
---------- -- -------------------
----------- -- -
------- --------------------------------------
--
---
--
-在上面的示例代码中，我们使用一个状态变量 isLoading 来表示当前是否正在加载页面，然后显示对应的 UI。
处理没有更多项目的情况
当所有项目都已加载时，我们应该禁用加载更多按钮。我们可以在请求返回空数组时通过设置该变量来实现。
-- -------------------- ---- -------
------ - --------- --------- - ---- --------
----- ---------- - ---
------ ------- -------- -------------- -
----- ------ -------- - ------------
----- ------- --------- - -------------
----- ----------- ------------- - ----------------
----- --------- ----------- - ---------------
------------ -- -
----- ------------- - ----- -- -- -
-------------------
----- --- - ----- ------
----------------------------------------------------------------
--
----- -------- - ----- -----------
-- ---------------- --- -- -
------------------
- ---- -
------------------- -- ------------- --------------
--------------------
-
--
-- --------- -
----------------
-
-- ------ ----------
----- -------------- - -- -- -
----------------- -- ------- - ---
--
------ -
--
----------------- -- -
---- --------------------------------
---
---------- -- -------------------
----------- -- ------- -- -
------- --------------------------------------
--
--------- -- -------------------
---
--
-在上面的示例代码中，我们使用了一个状态变量 hasMore，来跟踪是否还有更多项目可以加载。我们只有在服务器返回非空数组时才将新项目添加到项目列表中，并将 hasMore 设置为 false，以避免尝试加载不存在的项目。
在最后的渲染中，我们禁用了加载更多按钮，如果没有更多项目了，则将其替换为文本元素。
扩展和优化无限加载
添加搜索功能
你可以优化你的无限加载应用程序的功能，从而帮助用户更好地查找内容。例如，你可以通过搜索过滤列表中的项目。为了实现这一点，你需要识别用户输入，然后相应地向服务器发出请求。
-- -------------------- ---- -------
------ - --------- --------- - ---- --------
----- ---------- - ---
------ ------- -------- -------------- -
----- ------ -------- - ------------
----- ------- --------- - -------------
----- ------- --------- - -------------
----- ----------- ------------- - ----------------
----- --------- ----------- - ---------------
------------ -- -
----- ------------- - ----- -- -- -
-------------------
----- --- - ----- ------
--------------------------------------------------------------------------------
--
----- -------- - ----- -----------
-- ---------------- --- -- -
------------------
- ---- -
------------------- -- ------------- --------------
--------------------
-
--
-- --------- -
----------------
-
-- ------ ------ ----------
----- -------------- - -- -- -
----------------- -- ------- - ---
--
----- ----------------- - --- -- -
-------------------------
-------------
-----------
-----------------
--
------ -
--
------
-----------
-------------
----------------------------
-----------------------
--
----------------- -- -
---- --------------------------------
---
---------- -- -------------------
----------- -- ------- -- -
------- --------------------------------------
--
--------- -- -------------------
---
--
-在上面的示例代码中，我们添加了一个查询状态变量 query，并在每次查询变化时重新设置 items 展示列表、page 页码以及 hasMore 变量。我们然后向服务器发出 URL 请求，带有查询字符串来执行搜索。
我们将查询插入到页面上方，并使用 text input 值触发搜索。当用户清除搜索输入时，我们将重新加载默认列表。
实现带有骨架屏的加载视觉优化
最后，我们可以通过在项目的开始加载之前展示一个骨架屏或占位符，提高我们的应用程序的视觉效果和用户体验。我们可以通过使用 CSS 预加载骨架屏幕动画来实现。
-- -------------------- ---- -------
------ - --------- --------- - ---- --------
----- ---------- - ---
------ ------- -------- -------------- -
----- ------ -------- - ------------
----- ------- --------- - -------------
----- ------- --------- - -------------
----- ----------- ------------- - ----------------
----- --------- ----------- - ---------------
------------ -- -
----- ------------- - ----- -- -- -
-------------------
----- --- - ----- ------
--------------------------------------------------------------------------------
--
----- -------- - ----- -----------
-- ---------------- --- -- -
------------------
- ---- -
------------------- -- ------------- --------------
--------------------
-
--
-- --------- -
----------------
-
-- ------ ------ ----------
----- -------------- - -- -- -
----------------- -- ------- - ---
--
----- ----------------- - --- -- -
-------------------------
-------------
-----------
-----------------
--
------ -
--
------
-----------
-------------
----------------------------
-----------------------
--
----------------- -- -
---- --------------------------------
---
---------- -- -
--
------------- ------- ---------- ---------- ------ -- -
---- ----------- ---------------------------
---
------ ------
--------- -
------- -----
-------------- -----
-------------- ----
----------- --------
-
----------
---
--
----------- -- ------- -- -
------- --------------------------------------
--
--------- -- -------------------
---
--
-上面的示例代码中，我们在 isLoading 状态下使用了 JSX 将页面分成两个部分。在加载骨架屏期间，我们使用 DIV 元素和手动编写的 CSS 来创建骨架屏元素，使其尺寸和形状与实际数据项目相同。然后，我们在页面加载后加载更多按钮之前，展示所有实际的数据项目。
总结
在本文中，我们了解了如何在 Next.js 应用程序中实现基于页面的无限滚动加载功能。
我们从最简单的无限加载基础开始，并通过添加更多功能和扩展展现了一些最佳实践，从而使其功能更加强大、高效和用户友好。
如果在实现上遇到了问题，请随时查看社区和官方文档，它们可能会为您提供更多帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eed7b0f6b2d6eab38c9ac6