為什么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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。