介绍
ngx-infinite-scroll-extended 是一个基于 Angular 的 npm 包，它可以让我们实现一种十分实用的功能——滚动加载。滚动加载可以让长页面内容的加载更流畅，而不是一次性将所有内容全部展示出来。ngx-infinite-scroll-extended 可以监听滚动事件，当滚动到底部时会发出一个回调，并且可以同时支持多个滚动加载区域。
在这篇文章里，我们将结合具体的代码示例，教你如何快速使用 ngx-infinite-scroll-extended 实现滚动加载。
安装
使用 npm 包管理工具，我们可以很方便地安装 ngx-infinite-scroll-extended。
npm install --save ngx-infinite-scroll-extended
使用
在你的 Angular 项目中，你需要先将 ngx-infinite-scroll-extended 引入到你的模块中，比如：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - -------------------- - ---- ------------------------------- ----------- ------------- --------------- -------- ----------------------- ---------- -------------- -- ------ ----- --------- - -
在你的 HTML 中，你需要添加一个类名为"infinite-scroll"的 div 标签，这里我们以一个简单的图片滚动加载为例：
-- -------------------- ---- -------
---- -------------------
---- ----------- ----- -- ------- ------------------
---- -----------------------
---------------------------
----------------------------
-------------------------------
----------
------
------这里的 [infiniteScroll]="loadMore" 表示每当滚动到底部时会调用名为 loadMore 的函数，[infiniteScrollDistance]="2" 表示距离滚动到底部还有 2 倍这个元素的高度时就会调用 loadMore 函数，[infiniteScrollThrottle]="100" 则表示在 100ms 内最多只能调用一次 loadMore 函数。最后一行则是在滚动加载时展示的 loading 提示文字。
在你的 TypeScript 中，你需要定义名为 loadMore 的函数，该函数会在滚动到底部时调用。在该函数中，你需要在你的图片数组中添加更多的图片，并在完成加载后告诉 ngx-infinite-scroll-extended 我们已经完成了加载，可以进行下一次滚动监听了。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----- - ---- ----------------
------------
--------- -----------
--------- -
---- -------------------
---- ----------- ----- -- ------- ------------------
---- -----------------------
---------------------------
----------------------------
-------------------------------
----------
------
------
-
--
------ ----- ------------ -
------- ------- - -
--- -------------------------------------------- ------------ ----- ----
--- -------------------------------------------- ------------ ----- ----
--- -------------------------------------------- ------------ ----- ----
--- -------------------------------------------- ------------ ----- ----
--- -------------------------------------------- ------------ ----- ---
--
---------- -
----- ---------- ------- - -
--- -------------------------------------------- ------------ ----- ----
--- -------------------------------------------- ------------ ----- ----
--- -------------------------------------------- ------------ ----- ----
--- -------------------------------------------- ------------ ----- ----
--- -------------------------------------------- ------------ ----- ----
--
----------- - ---------------- --------------
-
-结语
在本文中，我们介绍了如何使用 ngx-infinite-scroll-extended 来实现滚动加载，代码简洁易懂，对移动端、响应式页面，和单页 Web 应用都非常有帮助。希望大家在实际开发应用时可以借鉴这篇文章，更好地使用 ngx-infinite-scroll-extended，实现滚动加载的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ec281e8991b448dc851