AngularJS 实现页面滚动到底自动加载数据的功能
要实现这个功能,可以通过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示例代码如下:
1 <div ng-controller='PostListController'>
2 <div infinite-scroll='demo.nextPage()' infinite-scroll-disabled='demo.busy' infinite-scroll-distance='1'>
3 <div ng-repeat='item in demo.items'>
4 <p>
5 <input type="hidden" value="{{item.PostId}}" />
6 <label>{{item.WriterName}}</label>
7 <label>{{item.WriterMail}}</label>
8 <label>{{item.WreckerName}}</label>
9 <label>{{item.StartDate}}</label>
10 <label>{{item.Location}}</label>
11 <label>{{item.Story}}</label>
12 </p>
13 </div>
14 <div ng-show='demo.busy'>Loading data...</div>
15 </div>
16 </div>
5. PostListController.js代码如下:
1 var ftitAppModule = angular.module('ftitApp', ['infinite-scroll']);
2
3 ftitAppModule.controller('PostListController',
4 function ($scope, Demo) {
5 $scope.demo = new Demo();
6 });
7
8 // 创建后台数据交互工厂
9 ftitAppModule.factory('Demo', function ($http) {
10 var Demo = function () {
11 this.items = [];
12 this.busy = false;
13 this.after = '';
14 this.page = 0;
15 };
16
17 Demo.prototype.nextPage = function () {
18 if (this.busy) return;
19 this.busy = true;
20
21 var url = "http://192.168.3.95:7002/api/post/nextpage?id=" + this.page + "&callback=JSON_CALLBACK";
22 $http.jsonp(url).success(function (data) {
23 var items = data;
24 for (var i = 0; i < items.length; i++) {
25 this.items.push(items[i]);
26 }
27 this.after = "t3_" + this.items[this.items.length - 1].id;
28 this.busy = false;
29 this.page += 1;
30 }.bind(this));
31 };
32
33 return Demo;
34 });
这样就实��了页面拖动到底后,从服务器自动加载数据的功能。
AngularJS权威教程 清晰PDF版 http://www.linuxidc.com/Linux/2015-01/111429.htm
希望你喜欢,并分享我的工作~带你走近AngularJS系列:
- 带你走近AngularJS - 基本功能介绍 http://www.linuxidc.com/Linux/2014-05/102140.htm
- 带你走近AngularJS - 体验指令实例 http://www.linuxidc.com/Linux/2014-05/102141.htm
- 带你走近AngularJS - 创建自定义指令 http://www.linuxidc.com/Linux/2014-05/102142.htm
如何在 AngularJS 中对控制器进行单元测试 http://www.linuxidc.com/Linux/2013-12/94166.htm
在 AngularJS 应用中通过 JSON 文件来设置状态 http://www.linuxidc.com/Linux/2014-07/104083.htm
AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm
AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据 http://www.linuxidc.com/Linux/2014-07/104402.htm
AngularJS 的详细介绍:请点这里
AngularJS 的下载地址:请点这里
本文永久更新链接地址:http://www.linuxidc.com/Linux/2015-01/112319.htm
AngularJS 实现页面滚动到底自动加载数据的功能的更多相关文章
- AngularJS:实现页面滚动到底自动加载数据的功能
要实现这个功能,可以通过https://github.com/sroze/ngInfiniteScroll这个第三方控件来实现.步骤如下: 1. 下载ng-infinite-scroll.js程序ht ...
- Python3从零开始爬取今日头条的新闻【三、滚动到底自动加载】
Python3从零开始爬取今日头条的新闻[一.开发环境搭建] Python3从零开始爬取今日头条的新闻[二.首页热点新闻抓取] Python3从零开始爬取今日头条的新闻[三.滚动到底自动加载] Pyt ...
- 页面滚动动态加载数据,页面下拉自动加载内容 jquery
<!DOCTYPE=html> <html> <head> < script src="js/jquery.js" type=" ...
- Jquery页面滚动动态加载数据,页面下拉自动加载内容
<!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="t ...
- 前端 | 页面触底自动加载 Vue 组件
不管是 web 端还是移动端,信息流都是现在很流行的信息展示方式.信息流经常搭配自动加载一起使用以获得更好的使用体验. 最近在使用 Vue 开发过程中也遇到了首页信息流自动加载的需求.大致了解了一下几 ...
- Jqeury Mobile实战之切屏效果以及屏幕滚动到底端加载更多和点击切换更多
http://blog.csdn.net/q718330882/article/details/46120691 //页面滚动到底部加载更多事件 $( window ).scroll(function ...
- sencha treestore 取消自动加载数据
gridstore在设置了autoLoad=false后不会自动加载数据,但是treestore不行,后来发现删掉root里的expanded:true后就可以了.但是界面上树没有展开,需在store ...
- 使用scrollpagination实现页面底端自动加载无需翻页功能
当阅读到页面最底端的时候,会自动显示一个"加载中"的功能,并自动从服务器端无刷新的将内容下载到本地浏览器显示. 这样的自动加载功能是如何实现的?jQuery的插件 ScrollPa ...
- jQuery-瀑布流 布局 (处理页面滚动和AJAX加载延迟问题)
瀑布流:这种布局适合于小数据块,每个数据块内容相近且没有侧重.通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 一.功能分析: 1.判断图片是否进入可视区域: 2.用AJAX ...
随机推荐
- Windows在结构FTPserver
同Windows8 案件,结构介绍 FTPserver脚步: 1.为Windows开启FTP功能:控制面板->程序->启用或关闭Windows功能.将下图所看到的的复选框选中 waterm ...
- 九度OJ 1035:找出直系亲属(二叉树)
题目1035:找出直系亲属 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:1309 解决:521 题目描述: 如果A,B是C的父母亲,则A,B是C的parent,C是A,B的child,如 ...
- Birdge(桥接)模式
1.出现原因 1.同一个类型,有两个变化的维度(两个维度的抽象:一个抽象部分的抽象,一个实现部分的抽象) 2.如何应对这种“多维度的变化”?如何利用面向对象技术来使得同一类型可以轻松地沿着两个方向变化 ...
- usaco 1.2.1(指针技巧)
★Milking Cows 挤牛奶 三个农民每天清晨 5 点起床,然后去牛棚给 3 头牛挤奶.第一个农民在 300 时刻(从 5 点开始计时,秒为单位)给他的牛挤奶,一直到 1000 时刻.第二个农民 ...
- query 原理
query原理的简单分析,让你扒开jquery的小外套. 引言 最近LZ还在消化系统原理的第三章,因此这部分内容LZ打算再沉淀一下再写.本次LZ和各位来讨论一点前端的内容,其实有关jquery,在 ...
- css兼容性问题的整理
css兼容性问题的整理 1.文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白1 ...
- 多个AsynceTask无法同时运行的现象分析
关于这篇博客所提到的问题是在一段再简单不过的代码中意外出现的.当时我使用了两个不同'AsyncTask'帮助我执行两个需要在后台执行任务.并且这两个'AsyncTask'几乎是同时运行的.原本会正常运 ...
- Git - error: RPC failed; result=22, HTTP code = 401 fatal: The remote end hung up unexpectedly
在用Git管理代码版本时,用git push命令提交代码,提示: 有以下几个可能性: Git 版本过低.GitCafe 推荐使用的 Git 版本是 >= 1.7. $ git --version ...
- iOS 监听声音按键
有时在项目中需要监听用户是否按下了物理声音键,然后来做某些操作,如:你自定义了一个照相功能,希望用户按下声音按键时也能进行拍照,苹果自带的照相机就有这种功能. 监听物理声音键是否按下的方法有很多中,我 ...
- List remove操作注意问题
public static void main(String[] args) { // TODO Auto-generated method stub List<String> list ...