基于AngularJS实现页面滚动到底自动加载数据的功能


Posted in Javascript onOctober 16, 2015

要实现这个功能,可以通过 https://github.com/sroze/ngInfiniteScroll 这个第三方控件来实现。步骤如下:

1. 下载ng-infinite-scroll.js程序 http://sroze.github.io/ngInfiniteScroll/ 目前版本是1.0.0

2. 如果你是用的jQuery2.0以上版本,还需要修改ng-infinite-scroll.js程序,将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改为$(elem).xxx

3. 在HTML中引入script

<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>

4. 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>

5. PostListController.js代码如下:

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;
 });

这样就实现了页面拖动到底后,从服务器自动加载数据的功能。

PS:AngularJS的加载执行过程

1. HTML页面的加载,这会触发加载页面包含的所有JS (包括 AngularJS)

2. AngularJS启动,搜寻所有的指令(directive)

3. 找到ng-app,搜寻其指定的模块(Module),并将其附加到ng-app所在的组件上。

4. AnguarJS遍历所有的子组件,查找指令和bind命令

5. 每次发现ng-controller或者ng-repeart的时候,它会创建一个作用域(scope),这个作用域就是组件的上下文。作用域指明了每个DOM组件对函数、变量的访问权。

6. AngularJS然后会添加对变量的监听器,并监控每个变量的当前值。一旦值发生变化,AngularJS会更新其在页面上的显示。

7. AngularJS优化了检查变量的算法,它只会在某些特殊的事件触发时,才会去检查数据的更新,而不是简单地在后台不停地轮询。

Javascript 相关文章推荐
载入进度条 效果
Jul 08 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
innerHTML在IE中报错解决方案
Dec 15 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
May 20 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 Javascript
Vue Render函数原理及代码实例解析
Jul 30 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 #Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 #Javascript
javascript实现动态标签云
Oct 16 #Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 #Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 #Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 #Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 #Javascript
You might like
php.ini中date.timezone设置分析
2011/07/29 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
JavaScript Eval 函数使用
2010/03/23 Javascript
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
Python中functools模块函数解析
2017/03/12 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
使用pandas读取文件的实现
2019/07/31 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
GWT的应用有哪两种部署模式
2012/12/21 面试题
个性与发展自我评价
2014/02/11 职场文书
挂职自我鉴定
2014/02/26 职场文书
《九色鹿》教学反思
2014/02/27 职场文书
企业安全标语
2014/06/07 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
导游词之南京中山陵
2019/11/27 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
python实现层次聚类的方法
2021/11/01 Python
python单向链表实例详解
2022/05/25 Python