Ionicはクロスプラットフォームのモバイルアプリ向けフレームワークです。主にiOS/Android向けに、ワンソースコードでモバイルアプリを開発することができます。, モバイルアプリでリスト表示を実装する際、差分読み込みを行うことで無限にスクロールできるような振る舞いを持たせることがよくあります。具体的には以下の順番で処理します。, このような処理をiOSやAndroidで実現したい場合は、頑張って実装するかライブラリを使うかの2択になります。, それでは実装しましょう。サンプルの Home.vue に無限スクロールするリストを表示します。, まずサンプルのデータとして以下を Home.vue と同じ階層に用意します。長いので省略していますが、以降の処理の関係上、サンプルでは10の倍数の個数になるように用意してください。, 次に無限スクロールの実装です。まずはソースコード全体を眺めつつ、ポイントを解説します。, この users というデータは、スクリプト側にある data() で返却しています。, こちらは主に一番下までスクロールしたことのハンドリング、およびローディングの表示などを担当しています。, threshold 属性は一番下までスクロールしたことのハンドリングの閾値です。100px を指定すると、残り100pxまでスクロールが到達すると次の読み込みを行うためのイベントを走らせることができます。この数が多ければ多いほどユーザーに気づかれない形で読み込める確率が上がりますが、同時に先読みしすぎる問題も出てくるので、100pxなどが丁度良いと思います。, 極めて重要なポイントは 追加読み込みのイベントハンドラは、初期読み込みが終わってから設定した方が良い という点です。, IonicInfiniteScrollでは初期読み込みが完了している・していないに関わらず、一番下までスクロールしたことをハンドリングするため、初期読み込みが終わっていない状態でハンドリングしてしまうと初期表示で追加読み込みが必要、といった状態になってしまいます。, そのため以下では、初期読み込みが終わってからイベントハンドラを設定するようにしています。, また、追加の読み込みが一度完了するごとに complete を呼ぶことで、重複した追加読み込みなどは起きません。, 最後まで読み込み終わったら、非活性化することで二度と追加読み込みは走らないようにできます。, サーバーからデータを取得して表示するような機能はよくある機能の1つだと思います。ぜひ参考にしてみてください。, IonicとVueを組み合わせたWebアプリを作りましょう。無限スクロールするリストを作ってみました。, ion-infinite-scroll - Ionic Framework 日本語ドキュメンテーション. -->,