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 - {式} ブラウザの一番下までスクロールするときに実行される関数または式は、通常、関数形式です。

②infinite-scroll- distance (オプション) - {number} 式または数値の場合、ブラウザの下部からスクロール バーまでの距離を示し、①の関数が実行されます。この値を 2 に設定すると、高さ 1000px の要素に対して、要素の下端とブラウザ ウィンドウの下端との距離が 2000px ピクセル以内の場合に、①の関数が 1 回のスクロールなしで 1 回実行されます。 (この値のデフォルトは 0 です。つまり、要素が要素の一番下までスクロールし、ブラウザ ウィンドウ (スクロール領域) の一番下に到達すると、スクロール領域の関数が実行されます。

③infinite-scroll-disabled (オプション) - {boolean} ブール値。値が true の場合、この属性はスクロールを一時停止または停止するために使用されます。たとえば、データの AJAX リクエスト中にスクロール バーを移動する場合、この属性を設定してスクロール関数の実行を無効にする必要があります。 (オプション) - {boolean} ブール値。ページの初期化時に命令が 1 回実行されるかどうかを示す値 (この場合、初期スクロールがない場合でも) のデフォルト値は true です。つまり、この①の関数は次のようになります。

⑤infinite-scroll-listen-for-event (オプション) - {string} イベントが発生すると、スクロール関数が再実行され、スクロール位置が再配置されます。たとえば、要素が変更されると、スクロール関数が再実行されます

(2) ローカル DEMO

公式 Web サイトには、ローカルで実行してローリング ロードを実装する例が示されています:

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 プログラミングのすべての人に役立つことを願っています

AngularJS が ngInfiniteScroll に基づいてドロップダウン スクロール読み込みを実装する方法に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください