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

Angular複数ファイルでの読み込み

Angularでいろいろな処理を書いているんですが、処理が膨らんでくると1つのファイルに全ての処理を書いていては当然非効率になります。 ざっくり分けると ほとんどの処理に共通な処理を集めたファイル 特 …

no image

package.jsonによるタスクの実行

前回の記事でgulpによるタスクの実行を書きましたが、package.jsonでこれを行うこともできます。 てっきり依存ライブラリの記述だけかと思いますしたが、様々なタスクを実行できるようですね。イメ …

no image

jquery multipleについて(基本編)

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。 今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更した …

no image

Promiseを使った非同期処理

今回はPromiseを使った非同期処理について。 JavaScriptでの非同期処理ですが、処理1、処理2があった場合、よく言われるコールバック地獄になってしまいます。うまく関数化すればそうでもない気 …

no image

font-awesomeのインストール(タスクランナー経由)

fontawesomeをタスクランナー経由でインストールすることについて。 CDNでインストールするだけならURL張り付けるだけですが。 インストール まずnpmで下記コマンドでインストールをします。 …