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

AngularJSでのDB接続

AngularJSでデータベースへのアクセスをしたいときの処理を記述します。 注意点としては、なんといっても非同期なことです。同期させることも無理ではないようですが、基本非同期ですので、この点を理解し …

no image

timepickerについて

日付を入力するときに直接、文字入力するのがメンドイことからカレンダーが表示されるプラグインを使っている人は多いでしょう。 私も日頃Datepickerというライブラリを使っています。が、このプラグイン …

no image

bootstrapでのJavaScriptエラーチェック

お問い合わせフォームの入力チェックというのは本来サーバーサイド側でやらなくてはいけないのですが、JavaScriptによってクライアント側でやることも可能です。 入力欄にフォーカスして、遷移したときに …

no image

npmでのJSライブラリインストール&ビルド(※Laravel使用時)

JavaScriptのインストールですが、いままではライブラリを1つ1つインストールしてました。 bowerでインストールしたこともあったんですが、読み込み自体は1つ1つしていました。 先日仕事でnp …

no image

JSF+ajax

JSFでajaxを使うときにいろいろと調べたのでメモ。 やろうとしたことはWEB上で給与明細の計算をしたくて、プルダウンで月の変更したら自動的に経費が該当月に替わるというシステムです。 ajaxを使う …