skillup

技術ブログ

JavaScript

AngularJSでのinfite_scroll

投稿日:

今回も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
http://qiita.com/kukimo/items/dd55b278a6007a87b771 

-JavaScript
-

執筆者:


comment

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

関連記事

no image

gulpに関して

gulpに関しての復習と色々と間違っていたところもあるのでまとめ。 ちなみに以前書いた記事は下記 gulpインストールとタスクの実行 Contents1 インストール2 タスクの実行3 npxコマンド …

no image

npmコマンドの整理

npmのコマンドのまとめに関して。 Contents1 npmとは?2 よく使うコマンド2.1 npm init -y2.2 npm install パッケージ名(npm -i パッケージ名)2.2. …

no image

Angular概論 モジュール、コントローラー、スコープなど

Contents1 Angularインストール2 ソース2.1 モジュール、スコープとコントローラ2.1.1  モジュールとは2.1.2 コントローラーとは2.1.3 スコープとは3 参考リンク An …

no image

jQuery子要素の取得方法など

jQueryで要素を取得する方法って$(“セレクタ”)しか知らなかったんですが、他にもいろいろあることがわかったのでちょっと紹介。 例えばtrの列の中に横1列に<inpu …

no image

vueの環境構築

vueについて勉強したことなどを。 Contents1 vueとは?1.1 方法1 CDN1.2 方法2 npm+コンパイル vueとは? 近年のJavaScriptフレームワークの一種で「双方向デー …