本文實例講述了AngularJS基于ngInfiniteScroll實現下拉滾動加載的方法。分享給大家供大家參考，具體如下：

1.分頁加載數據的基礎上，如何通過滾動加載，實現分頁加載數據的效果，github上，針對AngularJS，有一款不錯的插件，地址為：https://github.com/sroze/ngInfiniteScroll

2.下面來看官方給出的文檔

（1）使用樣例：

<ANY infinite-scroll='{expression}'   [infinite-scroll-distance='{number}']   [infinite-scroll-disabled='{boolean}']   [infinite-scroll-immediate-check='{boolean}']   [infinite-scroll-listen-for-event='{string}']></ANY>

解釋各個屬性（指令的含義）

①infinite-scroll - {expression} 當滾動到瀏覽器底部時，所執行的函數或者表達式，通常是函數形式。

②infinite-scroll-distance (optional) - {number} 表達式或者數字，如果是一個數字，表示滾動條距離瀏覽器底部多少遠時，執行①中里面的函數。如果將這個值設置為2，對于1000px高度的元素，當元素底部距離瀏覽器窗口底部距離在2000px像素以內，沒滾動一次，都會執行一次①里面的函數。（這個值默認是0，即當元素滾動到元素底部達到瀏覽器窗口（滾動區域）底部時，執行滾動區域里面的函數。

③infinite-scroll-disabled (optional) - {boolean} 一個布爾值，用于標志滾動表達函數能否執行，如果值為true，表示滾動函數不能被執行。這個屬性，通常用于暫停或者停止滾動。比如當我們在AJAX請求數據的過程中，移動了滾動條，這時就需要設置這個屬性，禁止滾動函數的執行。

④infinite-scroll-immediate-check (optional) - {boolean} 一個布爾值，用于標志指令在初始化頁面時，是否為初始執行一次（即使這種情況下，沒有初始滾動），默認值為true，表示初始會執行一次這①里面的函數。

⑤infinite-scroll-listen-for-event (optional) - {string} 一個事件，當接受到這個事件時候，會重新執行滾動函數，重新定位滾動位置，比如到元素被修改時，會重新執行滾動函數。

（2）本地的DEMO

官網給出了本地運行，實現滾動加載的例子：

HTML代碼：

<div ng-app='myApp' ng-controller='DemoController'> <div infinite-scroll='loadMore()' infinite-scroll-distance='2'>  <img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}'> </div></div>

JS代碼：

var myApp = angular.module('myApp', ['infinite-scroll']);myApp.controller('DemoController', function($scope) { $scope.images = [1, 2, 3, 4, 5, 6, 7, 8]; $scope.loadMore = function() {  var last = $scope.images[$scope.images.length - 1];  for(var i = 1; i <= 8; i++) {   $scope.images.push(last + i);  } };});

更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構總結》

希望本文所述對大家AngularJS程序設計有所幫助。