无限滚动，也被称为“无限滚动加载”，是一种常见的Web应用程序UI模式。它可以为用户提供流畅的浏览体验，而不需要请求新的页面或手动单击“加载更多”按钮。
在这篇文章中，我们将使用 Angular 7 框架来实现无限滚动。我们将重点介绍如何使用 Angular 的内置指令和RxJS库来处理数据。本篇文章的代码示例已经托管在 GitHub 上。
原理
Angular提供了一些内置指令来处理视图中的滚动事件：@HostListener 和 @ViewChild。 @HostListener 指令可以监听DOM元素事件，而 @ViewChild 可以获取DOM元素的引用。
在本例中，我们将使用 @ViewChild 指令来获取<div>元素的引用，该元素将包含我们的数据，并在页面滚动时加载更多的数据。在 @HostListener('scroll') 事件中，我们将检查滚动条的位置和元素的高度，以确定是否需要加载更多的数据。如果需要，我们将使用RxJS库来发送新的HTTP请求来获取更多的数据。
创建无限滚动指令
首先，我们将创建一个无限滚动指令，以便通过滚动检测来加载数据。无限滚动指令将在 ngOnInit事件中启动，并创建观察者以监视页面滚动事件。
------ - ---------- ------------- ------- ----------- ------ - ---- ----------------
------ - --------- - ---- -------
------ - ------------ - ---- -----------------
------------
--------- ---------------------
--
------ ----- ----------------------- ---------- ------ -
--------- ----------- - --- ---------------
------------------- ----------- ----------- - -
---------- -
----- ------- - ---------------------------------------- ---------
-------------------------
-------------------- -- -
-- --------------------- -
------------------------
-
---
-
--------------- ------- -
----- ------- - ------------------------------
----- -------- - ----------------- - -------------------- -- -------------------- - ---- -- ---- ------ ------
------ ---------
-
-在上述代码中，我们使用RxJS的fromEvent操作符来从DOM元素中获取scroll事件。然后，我们使用RxJS的throttleTime操作符来限制发出事件的频率。在事件处理程序中，我们检查滚动条是否到达了页面底部，如果是，则发送一个新的事件来请求更多数据。
使用无限滚动指令
现在，我们可以将无限滚动指令应用到我们的组件中。这里有一个例子组件，通过滚动加在更多数据，注意，这里有一些伪代码用来说明如何使用无限滚动指令加载数据。
---- ------------------------ ----------------- -------------------------------
----
--- ----------- ---- -- -------- ---- -------
-----
------在上述代码中，我们在<div>元素上应用了无限滚动指令，并指定了处理滚动事件的 loadMoreData() 方法。我们的<ul>元素包含我们的数据，我们将使用 *ngFor 指令来遍历数据，并将其渲染到页面上。
在我们的组件中，我们将创建一个方法来处理滚动事件，并发送一个HTTP请求来加载更多的数据。这里是一个简单的代码示例：
------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- ------------------
------------ -------------------------------
---------- -------------------------------
--
------ ----- ------------------- ---------- ------ -
----- ----- - ---
------------------- ------------ ------------ - -
---------- -
----------------
-
---------- -
-- ----- ------- ----
-
-------------- -
-- ---- ---- ----
----------------------------------------------- -- -
--------- - -----------------------
---
-
-在上面的代码示例中，我们在 ngOnInit() 方法中加载初始数据，并在 loadMoreData() 中加载更多数据。当我们收到新的数据时，我们将数据链接到我们原来的数据中。
结论
通过本篇文章，我们学习了如何使用Angular 7框架中的内置指令和RxJS库来实现无限滚动加载。通过我们的示例代码，你应该已经有了一个清晰的思路：当需要实现列表类似的无限滚动时，应该如何着手开发了。无限滚动可以增强用户体验，减轻服务器端负担，并为前端开发提供新的解决方案。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670504fdd91dce0dc8515e45