随着 Web 应用程序的普及，无限滚动加载成为了越来越流行的设计模式。它可以使用户感到更流畅，避免需要单击“下一页”按钮的情况。在 TailwindCSS 中实现无限滚动加载并不难，但是需要了解一些特定的技巧。 在这篇文章中，我们将讲解如何使用 TailwindCSS 实现无限滚动加载。
创建 HTML 结构
首先，我们需要创建一个 HTML 结构。我们将使用在视口中显示数千个样本数据的简单 HTML 表格。
-- -------------------- ---- -------
---- ---------------------
------ ---------------
-------
----
-------------
------------
-------------
-------------
-----
--------
------ ----------------
----
----------
------- -----------
------------------------
-----------------
-----
---- --- ---- ---- ---- ---
--------
--------
------在这个表格中，我们包含了一个数据体，用于展示表格的每一行的信息。我们也可以使用一个链接或一个按钮来触发加载更多的数据。
使用无限滚动加载实现动态数据加载
无限滚动加载是这个例子中的关键技术。每当用户滚动到表格的底部，加载更多的数据将自动联机。使用 Vue 和 jQuery 它可以很好地实现。
-- -------------------- ---- -------
---- -------------------- ------------------
------ ---------------
-------
----
-------------
------------
-------------
-------------
-----
--------
-------
--- ---------- -- ----- --------------
------ ------ -------
------ -------- -------
------ --------- -------
------ --------- -------
-----
--- -----------------
--- ---------------------------
-----
--------
--------
------
--------
--- -- - --- -----
--- ----------------
----- -
----- ---
---------- ------
--
-------- ---------- -
--------------------------------- -------------------
--------------------
--
-------- -
------------- ---------- -
-- -------------------- - --------------- -- -------------------------- -- ---------------- -
--------------------
-
--
------------- ---------- -
--- ---- - -----
-------------- - -----
--------------------------------------------------- --------- ---------- ---------------------
---------------- -- ----------------
-------------------- -
--------- - -----------------------
-------------- - ------
---
-
--
---------- ---------- -
------------------------------------ -------------------
--
---
---------首先，我们为表格容器添加了一个 ID，以便在 Vue 实例中引用。
然后，我们在 Vue 实例的 data 对象中创建了一个 rows 数组，以保存要呈现的行数据。我们还添加了一个 isLoading 标志，用于表示当数据正在加载时表格处于锁定状态。
在 mounted 钩子函数中，我们添加了一个用于处理滚动事件的监听器，和一个 loadMoreData 方法。loadMoreData 方法检查表格是否已铺满整个屏幕，如果是，它就会用 fetch API 获取新的数据，并将其添加到 rows 数组中。
如果正在加载数据（isLoading 为 true），表格底部会显示一条 Loading… 消息。
最后，在 destroyed 钩子函数中，我们删除了添加到 Vue 实例中的监听器。
结论
在 TailwindCSS 中实现无限滚动加载并不难，它只需要一点 JavaScript 和 Vue 组件的知识。但是，尽管他简单，使用这个技巧可以提高用户的体验，增强你的应用程序性能，让你的网页更加专业优秀。下面是完整的代码。
-- -------------------- ---- -------
---- -------------------- ------------------
------ ---------------
-------
----
-------------
------------
-------------
-------------
-----
--------
-------
--- ---------- -- ----- --------------
------ ------ -------
------ -------- -------
------ --------- -------
------ --------- -------
-----
--- -----------------
--- ---------------------------
-----
--------
--------
------
--------
--- -- - --- -----
--- ----------------
----- -
----- ---
---------- ------
--
-------- ---------- -
--------------------------------- -------------------
--------------------
--
-------- -
------------- ---------- -
-- -------------------- - --------------- -- -------------------------- -- ---------------- -
--------------------
-
--
------------- ---------- -
--- ---- - -----
-------------- - -----
--------------------------------------------------- --------- ---------- ---------------------
---------------- -- ----------------
-------------------- -
--------- - -----------------------
-------------- - ------
---
-
--
---------- ---------- -
------------------------------------ -------------------
--
---
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f7732ac5c563ced59cbeec