skillup

技術ブログ

JavaScript

AngularJSでのinfite_scroll

投稿日:2017年6月4日 更新日:

今回もAngularネタです。

一般的なデータの一覧画面ではページャーをボタンで移動するのではなく、スクロールするだけで次々とアクセスできるようになるのが一般的でしょう。

facebookやtwitterなどが一般的ですね。

そんなときに使えるのがngInfiniteScrollというライブラリです。

インスト-ル

bowerに下記のように記述してあげればOKです。(2017年6月現在1.3.4が最新です。)

バージョンが古い(具体的には1.0.0以前)場合、後述するような不具合が起こります。

ソース

HTML

JS

説明

非常にシンプルでスクロールをし、スクロール量が画面下に達した時点で読み込みが始まります。

infinite-scroll 実際に発火されるメソッド

infinite-scroll-disabled trueのときはメソッドが発火しません。使いどころとしてはある処理を読み込んでいるときは多重読み込みになってしまうので、読み込みが始まった時点でtrueにし、データを読み込んだ時にはfalseにします。

infinite-scroll-distance スクロールを検知する画面サイズの定義のようです。0の場合ブラウザの底辺になります。

var app = angular.module(“myApp”, [‘infinite-scroll’]).value(‘THROTTLE_MILLISECONDS’, 500);

上記はリクエストが発生し、次のリクエストが発生するまでの最低の間隔です。

これを書かないとスクロールした瞬間に大量のリクエストが発生します。

上記のisLoadingも役に立たななかったです。(最初のリクエストの処理が始まってisLoadingが始まる前にすでに複数のリクエストが呼ばれてしまっている。)

(0.5秒であれば最初の読み込みが始まり、$isLoadingに達成するまでに十分時間がもちます。)

ちなみに1.0.0以降でないと有効にはないっていないのでバージョンには気を付けましょう。

参考リンク

https://sroze.github.io/ngInfiniteScroll/documentation.html

angular.jsで無限スクロール

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

JavaScriptのcall,bind+npmからのライブラリ読み込みで

npmを使ってライブラリ管理をする場合、個別にライブラリを読み込まず、package.jsonで読み込んだあと、一括してライブラリを読みこむことが一般的です。 で、その時の処理に関して。 例えばlea …

no image

JavaScriptのコールバック関数について

Angularをやるうえで前提となるJavaScriptの知識を書いていこうかと。 PHPでもありますが、関数を変数として扱い、別の関数の引数にすることができます。 これを利用すると下記のようなソース …

no image

Angularモジュール間の読み込み

Angularで以前こちらで、複数のコントロールに分ける方法を書きましたが、コントローラーだけでなく、Factory,ServiceなどいろいろなタイプのサービスがAngularにはあります。 プログ …

no image

JSリンク集+git ブランチ指定 clone

現状の私の課題としてUIに対する意識が甘いということが上げられます。 大昔のサイトで使っているようなわかりにくいUIをそのまま使っているんですよね。 UIといってもいろいろな要素が必要となってきますが …

no image

ECMAScriptについて復習

ここ数年のJavaScript界隈は進化が激しく、私の知識はレガシーな状態で止まっているので、自分に備忘録として整理しておこうと思います。 Contents1 ECMAScriptとは?2 ECMAS …