@zladuric/ngx-infinite-scroll 是一个 Angular 的无限滚动包，它允许您在滚动时加载页面内容。这对于需要加载大量数据的 Web 应用程序特别有用。使用该包，您可以轻松地实现无限滚动效果，使用户可以从一个较小的数据块开始，然后不断加载更多内容。
安装
使用 npm 包管理器来安装 @zladuric/ngx-infinite-scroll。
npm install @zladuric/ngx-infinite-scroll --save
使用
导入 InfiniteScrollModule，并将其添加到应用程序的 NgModule 中。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - -------------------- - ---- -------------------------------- ----------- ------------- --------------- -------- --------------- ---------------------- ---------- --------------- -- ------ ----- --------- --
现在，使用无限滚动效果的列表应该包括 InfiniteScrollDirective 指令。例如：
-- -------------------- ---- -------
----
--------------
----------------------------
------------------------------
-----------------------
-
----
---
-----
------注意，infiniteScrollDistance 属性指定离底部多少距离开始加载更多内容，而 infiniteScrollThrottle 属性设置发出请求之间的最小时间间隔。
需要在组件中实现 onScroll 来加载更多数据。例如：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
------ -------- - --- -----------------------
----------- ---- -
--------
----- -------- - --- ------------------- -------
---------- - ----------------------------
-
-运行效果如下所示：
总结
@zladuric/ngx-infinite-scroll 使实现无限滚动效果变得非常容易。使用此包，您可以节省大量编写复杂代码的时间，并使用户的体验更加流畅。希望您已经学会如何安装和使用该包，通过这种方式您将能够轻松地将无限滚动效果添加到 Angular 应用程序中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fdc81e8991b448dd78d