「Vue-infinite-loading」で無限スクロールを実装する

はじめに

今回は無限スクロールライブラリ「Vue-infinite-loading」をご紹介します。

環境

Vue.js: 2.6.10

Vue-infinite-loading: ２.4.4

インストール

以下のnpm、CDNのどれか一つを使ってインストールします。

npm

npm install vue-infinite-loading -S

CDN

<script src="https://unpkg.com/[email protected]/dist/vue-infinite-loading.js"></script>

gitリポジトリは以下から取得できます。

https://github.com/PeachScript/vue-infinite-loading

導入手順

1. ライブラリの取り込み

1.1 webpack等の場合

import InfiniteLoading from 'vue-infinite-loading';
Vue.use(InfiniteLoading);

1.2 WEBページの場合

Vue.use(window.VueInfiniteLoading);

2. 分割読み込みロジック

データを分割するためのロジックを準備します。

$state.loaded() を介してこのプラグインにデータがあることを伝えます。

$state.complete を通じてこのプラグインにすべてのデータがロードされたことを通知します。

var todos = [];
 
// ダミーデータを100個作成
for(var i=0;i<100;i++){
  todos.push({
    text: "コンテンツ" + i, done: false
  });
}
 
new Vue({
  el: "#app",
  data: {
    page: 0,
    todos: []
  },
  methods: {
    infiniteHandler($state) {
      var self = this;
      
      if (self.todos.length >= this.page) {  
        // アイテム数が最大値以下だったら  
        todos.slice(this.page,this.page+10).filter(function(item){
          self.todos.push(item);
          return item;
        });
        this.page += 10;
        $state.loaded();
      } else {
        // アイテム数が最大数だったら終了
        $state.complete();
      }
    },
  }
});

3. テンプレートを準備

<div id="app">
  <h2>リスト:</h2>
  <ol>
    <li v-for="(todo,index) in todos" :key="index">{{ todo.text }}</li>   
  </ol>
  <infinite-loading @infinite="infiniteHandler"></infinite-loading>
</div>

デモ

>>専用ページで確認する

まとめ

無限スクロールを簡単に実装できる「Vue-infinite-loading」でした。

ドキュメントも充実しているので、非常に心強いです。

https://peachscript.github.io/vue-infinite-loading/

今日はこの辺でー