【Nuxt.js】vue-infinite-loadingで検索結果を無限スクロールする方法

Nuxt.jsで「vue-infinite-loading」というプラグインを使って、検索結果を無限スクロールする方法を紹介します。

事前準備

まずは「vue-infinite-loading」プラグインをインストールします。

pluginsディレクトリ配下にinfiniteloading.jsファイルを作成し、以下を追加します。

・infiniteloading.js

nuxt.config.jsのpluginsに「InfiniteLoading」を追加します。これで準備完了です。
・nuxt.config.js

 

無限スクロール実装

無限スクロールしたい検索結果の下に以下のコードを追加します。スクロールされるとinfiniteメソッドが呼び出されます。

検索結果が取得できなくなった場合はデフォルトだと「No more data :)」になっています。

変更したい場合は<span slot=”no-more”></span>と<span slot=”no-results”></span>の中に文言を追加することで変更できます。

spinnerは変更することで読み込み中のローディングをカスタマイズできます。

■カスタマイズ

  1. default
  2. circle
  3. bubbles
  4. spiral
  5. waveDots

infiniteメソッドが呼び出されると、APIを通してデータを取得してきます(API側の取得処理は割愛)。setTimeoutで3秒間指定した後、実行しています。

offsetを++していることで取得する次に取得すべきデータを判定しています。

取得データがある場合は、this.$refs.infiniteLoading.stateChanger.loaded()を呼び出し、取得データがなくなると、this.$refs.infiniteLoading.stateChanger.complete()メソッドを呼び出します。

また今回は検索機能もあるため、検索を実行した場合はthis.$refs.infiniteLoading.stateChanger.reset()でローディング結果をリセットして再度データを1から取得してきます。

以上、Nuxt.jsで「vue-infinite-loading」を使って、検索結果を無限スクロールする方法でした。