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

1.分頁加載數(shù)據(jù)的基礎(chǔ)上，如何通過滾動加載，實現(xiàn)分頁加載數(shù)據(jù)的效果，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} 當(dāng)滾動到瀏覽器底部時，所執(zhí)行的函數(shù)或者表達(dá)式，通常是函數(shù)形式。

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

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

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

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

（2）本地的DEMO

官網(wǎng)給出了本地運行，實現(xiàn)滾動加載的例子：

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

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

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

最新評論