前言
在前端开发中，无限滚动是经常遇到的需求。为了更加高效和方便地实现无限滚动，我们可以使用一些现成的工具包。本文介绍了一个常用的 npm 包：angular-whenscrolled。
angular-whenscrolled 是一个 AngularJS 模块，允许你使用 AngularJS 构建一个具有无限滚动的 Web 应用程序。
安装
通过 npm 安装
npm install angular-whenscrolled --save
添加 angular-whenscrolled 作为 AngularJS 应用程序的一个依赖。
var app = angular.module('myApp', ['angularWhenscrolled']);使用
HTML
首先，我们需要在 HTML 文件中添加如下代码：
<div when-scrolled="loadMore()">
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
</div>在这里，我们给 div 标签添加了一个 when-scrolled 属性，并将其绑定到了 $scope.loadMore 函数上。当用户向下滚动时，AngularJS 将自动调用 $scope.loadMore 函数。
JavaScript
接下来，我们需要在 AngularJS 控制器中定义 loadMore 函数，并将其绑定到 $scope 上。
-- -------------------- ---- -------
------------------------------ ---------------- -
------------ - ---
--------------- - ---------- -
-- --------- ---------
---------------------------------------------- -
-- ------ ----- ---
--- ---- - - -- - - --------------------- ---- -
------------------------------------
-
---
--
---在这里，我们定义了一个 $scope.items 数组，用于保存加载的数据。loadMore 函数将从服务器获取数据，并将其添加到 items 数组中。
示例
我们来看一个完整示例。
HTML
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ------------ ---------------
------- ---------------------------------------------------------------
------- ------------------------------------------------------------------------------
-------
----- -------------- -----------------------------
---- -------------------------- ------------------------------------
----
--- --------------- -- --------------------
-----
------
--------
--- --- - ----------------------- -------------------------
------------------------------ ---------------- ------ -
------------ - ---
--------------- - ---------- -
-- --------- ---------
---------------------------------------------- -
-- ------ ----- ---
--- ---- - - -- - - --------------------- ---- -
------------------------------------
-
---
--
---
---------
-------
-------JavaScript
-- -------------------- ---- -------
--- --- - ----------------------- -------------------------
------------------------------ ---------------- ------ -
------------ - ---
--------------- - ---------- -
-- --------- ---------
---------------------------------------------- -
-- ------ ----- ---
--- ---- - - -- - - --------------------- ---- -
------------------------------------
-
---
--
---总结
使用 angular-whenscrolled 可以快速实现无限滚动效果，从而提升用户体验。在使用时，只需定义一个 loadMore 函数，在函数中加载数据即可。
需要注意的是，需要在 AngularJS 应用程序中添加 angular-whenscrolled 模块作为依赖，才能使用相关的指令和服务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f8d9381d61a3540f78