AngularJS基於ngInfiniteScroll實作下拉滾動載入的方法

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

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

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

（1）使用範例：

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

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

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

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

③infinite-scroll-disabled (optional) - {boolean} 一個布林值，用於標誌滾動式表達式能否執行，如果值為true，表示滾動函數不能被執行。時就需要設定這個屬性，禁止滾動函數的執行。種情況下，沒有初始滾動），預設值為true，表示初始會執行一次這①裡面的函數。事件時候，會重新執行滾動函數，重新定位滾動位置，例如到元素被修改時，會重新執行滾動函數。

HTML程式碼：

<div ng-app=&#39;myApp&#39; ng-controller=&#39;DemoController&#39;>
 <div infinite-scroll=&#39;loadMore()&#39; infinite-scroll-distance=&#39;2&#39;>
  <img ng-repeat=&#39;image in images&#39; ng-src=&#39;http://placehold.it/225x250&text={{image}}&#39;>
 </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程式設計有所幫助。

rrreee

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