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

1.分頁(yè)加載數(shù)據(jù)的基礎(chǔ)上，如何通過滾動(dòng)加載，實(shí)現(xiàn)分頁(yè)加載數(shù)據(jù)的效果，github上，針對(duì)AngularJS，有一款不錯(cuò)的插件，地址為：https://github.com/sroze/ngInfiniteScroll

2.下面來(lái)看官方給出的文檔

（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>

解釋各個(gè)屬性（指令的含義）

①infinite-scroll - {expression} 當(dāng)滾動(dòng)到瀏覽器底部時(shí)，所執(zhí)行的函數(shù)或者表達(dá)式，通常是函數(shù)形式。

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

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

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

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

（2）本地的DEMO

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

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é)》

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

最新評(píng)論