无限滚动列表在前端开发中非常常见，可以提高用户体验和性能。通过 Vue.js 可以轻松地实现无限滚动列表，本文将介绍如何使用 Vue.js 构建一个无限滚动列表。
原理
无限滚动列表的原理是在列表底部添加一个占位元素，当滚动到该元素时请求下一页数据并添加到列表中。这样可以避免一次性加载所有数据，减少网络请求和占用内存。
准备工作
在开始构建无限滚动列表之前，需要先准备数据源和 API 接口。在本文中，我们使用 Random User Generator 提供的 API 接口获取用户数据。具体来说，我们按照下面的 URL 请求数据：
https://randomuser.me/api/?seed=foo&page=1&results=10
其中，foo 是一个种子，用于确保每次请求得到的数据不同。page 表示请求的页码，results 表示每页的数据量。
实现无限滚动列表
第一步：创建 Vue 实例
首先，我们需要创建一个 Vue 实例，并定义一个空数组用于存储用户数据。
-- -------------------- ---- -------
---- ---------
----
--- ----------- -- ------ ---------------
-- --------- --
-----
--- ------------------
-----
------
--------
--- -----
--- -------
----- -
------ --
-
--
---------在模板中，我们使用 v-for 指令遍历用户数据，并使用 :key 绑定用户的 id 属性。此外，我们在列表底部添加了一个空元素，用于触发下一页数据的请求。
第二步：监听滚动事件
下一步，我们需要监听滚动事件，并在滚动到底部时触发下一页数据的请求。为了做到这一点，我们可以使用 Vue 的 v-on 指令。
-- -------------------- ---- -------
---- -------- ---------------------------
----
--- ----------- -- ------ ---------------
-- --------- --
-----
--- ------------------
-----
------
--------
--- -----
--- -------
----- -
------ --
--
-------- -
------------- ---------- -
----- ------ - -----------------
----- --- - ----------------------------------
----- ------------ - ------------------
-- ---- - ------------ -- -- -
-----------------
-
-
-
--
---------在模板中，我们使用了 v-on:scroll 指令绑定了一个名为 handleScroll 的方法。在方法中，我们通过 this.$refs.bottom 获取到底部空元素的 DOM，然后通过 getBoundingClientRect() 方法获取其位置信息。
接着，我们计算出底部元素距离窗口顶部的距离 top 和窗口高度 windowHeight，如果 top - windowHeight 小于等于 0，即表示滚动到了底部，此时触发下一页数据的请求。
第三步：请求数据
最后，我们需要在滚动到底部时触发请求，并将新数据添加到用户列表中。
-- -------------------- ---- -------
---- -------- ---------------------------
----
--- ----------- -- ------ ---------------
-- --------- --
-----
--- ------------------
-----
------
--------
--- -----
--- -------
----- -
------ --
--
-------- -
------------- ---------- -
----- ------ - -----------------
----- --- - ----------------------------------
----- ------------ - ------------------
-- ---- - ------------ -- -- -
-----------------
-
--
----------- ----- ---------- -
----- ---- - --------------------------- - --- - -
----- -------- - ----- --------------------------------------------------------------------
----- ---- - ----- ---------------
---------- - --------------- ----------------
-
-
--
---------在 fetchUsers() 方法中，我们首先计算出当前需要请求的页面号 page（每页包含 10 条数据），然后使用 fetch() 方法请求数据。由于 fetch() 返回的是一个 Promise，我们需要使用 await 关键字获取其结果。
接着，我们将返回的数据数组和当前用户数组合并，得到一个新的用户数组，并将其赋值给 users 属性，从而实现更新列表的效果。
示例代码
最后，我们将上述实现步骤整合到一起，形成完整的示例代码。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------
-------
------
---- -------- ---------------------------
----
--- ----------- -- ------ ---------------
-- --------- --
-----
--- ------------------
-----
------
------- ------------------------------------------------------------
--------
--- -----
--- -------
----- -
------ --
--
-------- -
------------- ---------- -
----- ------ - -----------------
----- --- - ----------------------------------
----- ------------ - ------------------
-- ---- - ------------ -- -- -
-----------------
-
--
----------- ----- ---------- -
----- ---- - --------------------------- - --- - -
----- -------- - ----- --------------------------------------------------------------------
----- ---- - ----- ---------------
---------- - --------------- ----------------
-
-
--
---------
-------
-------总结
本文介绍了如何使用 Vue.js 构建一个无限滚动列表，并对其原理、使用了哪些知识点进行了详细阐述。
实际上，无限滚动列表通常需要考虑更复杂的场景，例如数据过滤、排序、搜索等，以及如何优化性能和用户体验。但本文所讲述的方法和思想是无限滚动列表的基本实现思路，在实际应用中能够提供一定的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6463c158968c7c53b04c4418