AngularJS实现无限滚动加载:ngInfiniteScroll插件集成与源码修改指南
本文介绍如何利用ngInfiniteScroll插件在AngularJS中实现页面滚动到底部自动加载数据的功能。详细说明了插件下载、针对jQuery 2.0+版本的源码修改方法、HTML引入方式以及Controller与View的具体代码实现,并简述了AngularJS的执行流程。
AngularJS无限滚动加载实现步骤
要实现页面滚动到底部自动加载数据的功能,可以借助第三方控件 来完成。具体实施步骤如下:
第一步,下载 ng-infinite-scroll.js 程序,访问地址 http://sroze.github.io/ngInfiniteScroll/,当前最新版本为 1.0.0。
第二步,若项目中使用的 jQuery 版本在 2.0 以上,需要对 ng-infinite-scroll.js 源码进行适配修改。具体操作是将代码中所有的 $window.xxx 替换为 $(window).xxx,并将 elem.xxx 替换为 $(elem).xxx。
第三步,在 HTML 文件中引入必要的脚本文件。
需要在 HTML 中依次引入 jQuery、AngularJS 以及 ng-infinite-scroll 的脚本,代码如下: <script type='text/javascript' src='path/to/jquery.min.js'></script> <script type='text/javascript' src='path/to/angular.min.js'></script> <script type='text/javascript' src='path/to/ng-infinite-scroll.min.js'></script>
第四步,编写 HTML 示例代码以集成滚动加载功能。
<div ng-controller='PostListController'>
<div infinite-scroll='demo.nextPage()' infinite-scroll-disabled='demo.busy' infinite-scroll-distance=''>
<div ng-repeat='item in demo.items'>
<p>
<input type="hidden" value="{{item.PostId}}" />
<label>{{item.WriterName}}</label>
<label>{{item.WriterMail}}</label>
<label>{{item.WreckerName}}</label>
<label>{{item.StartDate}}</label>
<label>{{item.Location}}</label>
<label>{{item.Story}}</label>
</p>
</div>
<div ng-show='demo.busy'>Loading data...</div>
</div>
</div>
对应的 HTML 结构示例如下:
var ftitAppModule = angular.module('ftitApp', ['infinite-scroll']);
ftitAppModule.controller('PostListController',
function ($scope, Demo) {
$scope.demo = new Demo();
});
// 创建后台数据交互工厂
ftitAppModule.factory('Demo', function ($http) {
var Demo = function () {
this.items = [];
this.busy = false;
this.after = '';
this.page = ;
};
Demo.prototype.nextPage = function () {
if (this.busy) return;
this.busy = true;
var url = "http://...:/api/post/nextpage?id=" + this.page + "&callback=JSON_CALLBACK";
$http.jsonp(url).success(function (data) {
var items = data;
for (var i = ; i < items.length; i++) {
this.items.push(items[i]);
}
this.after = "t_" + this.items[this.items.length - ].id;
this.busy = false;
this.page += ;
}.bind(this));
};
return Demo;
});
第五步,编写 PostListController.js 控制器逻辑。
通过上述配置与代码,即可实现页面拖动至底部时,自动从服务器加载后续数据的功能。
AngularJS执行流程解析
补充说明:AngularJS 的加载与执行过程大致如下:
1. HTML 页面加载,此过程会触发加载页面中包含的所有 JavaScript 文件(包括 AngularJS 本身)。
2. AngularJS 启动后,会搜寻页面中所有的指令(directive)。
3. 找到 ng-app 后,会搜寻其指定的模块(Module),并将其附加到 ng-app 所在的组件上。
5. 每当检测到 ng-controller 或 ng-repeat 指令时,系统会创建一个新的作用域(scope),该作用域构成了组件的运行上下文,并定义了各 DOM 组件对函数及变量的访问权限。
5. 每次遇到 ng-controller 或 ng-repeat 时,它会创建一个作用域(scope),该作用域即为组件的上下文。作用域决定了每个 DOM 组件对函数和变量的访问权限。
6. AngularJS 随后会添加对变量的监听器,并监控每个变量的当前值。一旦值发生变化,AngularJS 会更新其在页面上的显示。
免登录快速分享代码:适合面试协作的轻量级JS在线运行工具推荐
2026-11-05 14:45:59
JS空字符串和纯空格转浮点数的结果是什么
2026-11-05 11:04:42
JS在线格式化缩进混乱怎么办?配置项调整技巧
2026-11-04 23:27:25
JS怎么获取秒级时间戳
2026-11-03 21:45:29
JS时间戳怎么从毫秒转换为秒
2026-11-03 20:04:14
