AngularJS基於ngInfiniteScroll實現下拉滾動式載入的方法_AngularJS

本文執行個體講述了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程式設計有所協助。