为什么80%的码农都做不了架构师?>>>   

1、什么是 InfiniteScroll? 
无限滚动(Infinite Scroll)也称为自动分页、滚动分页和无限分页。常用在图片、文章或其它列表形式的网页中,用来在滚动网页到页面底部的时候自动加载下一页的内容。 
这种形式最早由推特(twitter)使用,后来必应图片搜索、谷歌图片搜 索、google reader等纷纷采用了这一项技术,于是靠滚动浏览器滚动条来翻页的技术慢慢在互联网上遍站开花。该技术非常适合移动端的数据自动加载。

2、什么是ngInfiniteScroll
ngInfiniteScroll 是用于 AngularJS的无限滚动控件,特点是简单易用,是AngularJS社区里应用最为广泛的”触底加载”控件。

3、如何使用ngInfiniteScroll? 
只要以下4步就可以搞定ngInfiniteScroll :

<1>引用javascript文件(注意把js加载顺序)
<script type='text/javascript' src='path/jquery.min.js'></script>
<script type='text/javascript' src='path/angular.min.js'></script>
<script type='text/javascript' src='path/ng-infinite-scroll.min.js'></script>
<2>声明对 ***infinite-scroll***的依赖
angular.module('myApplication', ['infinite-scroll']);   
<3>在html页面使用 infinite-scroll 元素
<div infinite-scroll="myPagingFunction()" infinite-scroll-distance="3"></div>
<4>ok,调用你的分页函数 myPagingFunction(),开始使用吧。使用细节参考[ngInfiniteScroll API文档](http://sroze.github.io/ngInfiniteScroll/documentation.html)。下附例子:
[ngInfiniteScroll 动态加载实例](http://sroze.github.io/ngInfiniteScroll/demo_async.html)

HTML代码:

<div ng-app='myApp' ng-controller='DemoController'><div infinite-scroll='reddit.nextPage()' infinite-scroll-disabled='reddit.busy' infinite-scroll-distance='1'><div ng-repeat='item in reddit.items'><span class='score'>{{item.score}}</span><span class='title'><a ng-href='{{item.url}}' target='_blank'>{{item.title}}</a></span><small>by {{item.author}} -<a ng-href='http://reddit.com{{item.permalink}}' target='_blank'>{{item.num_comments}} comments</a></small><div style='clear: both;'></div></div><div ng-show='reddit.busy'>Loading data...</div></div>
</div>

Javascript 代码(自动加载 Reddit):

var myApp = angular.module('myApp', ['infinite-scroll']);myApp.controller('DemoController', function($scope, Reddit) {$scope.reddit = new Reddit();
});// Reddit constructor function to encapsulate HTTP and pagination logic
myApp.factory('Reddit', function($http) {var Reddit = function() {this.items = [];this.busy = false;this.after = '';};Reddit.prototype.nextPage = function() {if (this.busy) return;this.busy = true;var url = "http://api.reddit.com/hot?after=" + this.after + "&jsonp=JSON_CALLBACK";$http.jsonp(url).success(function(data) {var items = data.data.children;for (var i = 0; i < items.length; i++) {this.items.push(items[i].data);}this.after = "t3_" + this.items[this.items.length - 1].id;this.busy = false;}.bind(this));};return Reddit;
});

特别提醒: 
容易犯的错误,把ng-repeat标签和infinite-scroll放在同一个

标签下:

<!-- 错误的写法! -->
<div infinite-scroll='pagerFunction()' ng-repeat='item in items'>{{item}}
</div>
<!-- 正确的写法! -->
<div infinite-scroll='pagerFunction()'><div ng-repeat='item in items'>{{item}}</div>
</div>

转载于:https://my.oschina.net/fcweb/blog/1579431

AngularJS 无限滚动加载数据控件 ngInfiniteScroll相关推荐

  1. php 无限滚动加载,无限滚动,_无限滚动加载数据问题,无限滚动 - phpStudy

    无限滚动加载数据问题 做移动端程序的时候,经常会遇到无限滚动的功能,通常实现无限滚动的方式是页面滚动到底部后出发一个ajax请求,后端返回数据然后动态追加DOM,但是如果DOM结构很复杂,追加的时候拼 ...

  2. vue2.0无限滚动加载数据插件

      做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...

  3. 【无限滚动加载数据】—infinite-scroll插件的使用

    网上对于infinite-scroll插件使用的例子不多.但由于它的出现,鼓吹了瀑布流形式的页面展示方式,所以不得不了解了解这种新的分页方式. 官网上有对infinite-scroll的详细描述,但一 ...

  4. Infinite-Scroll无限滚动加载数据

    无限滚动的实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据. 首先我们在页面上先放置10条数据,即第一页,每一项都是p标签: <div id="content& ...

  5. CGContextRef绘图-iOS球形波浪加载进度控件-HcdProcessView详解

    简书也有发布:http://www.jianshu.com/p/20d7... <iOS球形波浪加载进度控件-HcdProcessView>这篇文章已经展示了我在项目中编写的一个球形进度加 ...

  6. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

  7. openlayers添加按钮_OpenLayers3加载常用控件使用方法详解

    本文实例为大家分享了OpenLayers3加载常用控件使用的具体代码,供大家参考,具体内容如下 1. 前言 地图控件就是对地图的缩放.全屏.坐标显示控件等,方便我们对地图进行操作.OpenLayers ...

  8. VB6.0动态加载ActiveX控件漫谈[转]

    [转帖]VB6.0动态加载ActiveX控件漫谈http://www.7880.com/Info/Article-4b559560.html 熟悉VB的朋友对使用ActiveX控件一定不会陌生,众多控 ...

  9. 01-vue项目之滚动加载数据

    最近刚结束了一个vue项目,项目中发现了自己很多问题,例如,看到功能就想要使用插件,(⊙o⊙)-,这样是肯定不行呀,哎,用插件可以,自己也得会写呀,现在就记录一下一个不错的滚动加载数据. 1.页面布局 ...

最新文章

  1. mysql实现汉字转拼音
  2. matlab实现彩色图像灰度化的三种方法
  3. [转] AKKA简介
  4. LINK : fatal error LNK1168: cannot open Debug/Test.exe for writing
  5. 远程电脑桌面控制怎么看计算机,计算机如何通过远程控制,可以查看他人电脑屏幕...
  6. Mac OS X Terminal 101:终端使用初级教程以及Xcode
  7. C++ new和malloc区别
  8. android 关于 textview首行缩进 显示图片、文字问题
  9. nginx 禁止某个IP访问
  10. mcgs组态软件中字体如果从左到右变化_MCGS组态软件课件-第5章.ppt
  11. 使用管理员权限强制删除文件夹
  12. 2022茶艺师(初级)试题及在线模拟考试
  13. 英特尔 超核芯显卡 620mac_十代i9+3080显卡,男孩们的攒机快乐,还得拿出来显摆显摆!...
  14. 1月1日服务器例行维护公告,1月1日服务器例行维护公告(已完成)
  15. 一级域名注册如何申请?需要注意哪些事项?
  16. H5 微信小游戏群 openGID 解密
  17. android电视安装app
  18. Linux服务 Nginx(一)
  19. 计算机大数据的前景方向_未来计算机大数据的发展方向
  20. Python 通过文本生成词云

热门文章

  1. ×××××sales_data通过类型转换形成的临时对象不能转换成sales_data (非常量引用)
  2. C++中的值初始化和默认初始化
  3. [攻防世界 pwn]——实时数据监测
  4. Struts2技术详解
  5. instance of 泛型
  6. assets与static的区别
  7. nginx重新安装 引起的问题
  8. 散列函数的应用及其安全性
  9. Cannot find module 'express'
  10. 【iCore1S 双核心板_ARM】例程十六:USB_MSC实验——虚拟U盘