Vue.js vue-infinite-loadingを使用して無限スクロールを実装する

Vue.js vue-infinite-loadingを使用して無限スクロールを実装する

vueのライブラリである「vue-infinite-loading」を使えば、簡単に無限スクロールが実現可能です。ここでは、簡単な使い方を記述してます。

環境

  • OS  CentOS 8.0.1905 (Core)
  • node v12.13.1
  • npm 6.13.2
  • @vue/cli 4.1.1

プロジェクト作成

loading-testという名前でプロジェクトを作成してます。

作成時はdefaultを選択してます

vue-infinite-loadingインストール

vue-infinite-loadingをインストールします。

vue-infinite-loading使い方

src配下のmain.jsを下記の通りに編集します

src/components配下のHelloWorld.vueを下記の通りに編集します。

実行してみます。

ブラウザから http://プライベートIP:8080 にアクセスすると itemが3秒毎に5つずつloadingされていることが確認できます。