はじめに

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

 

無限スクロール

 

 

環境

Vue.js: 2.6.10

Vue-infinite-loading: 2.4.4

 

インストール

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

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 = [];
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/

 

今日はこの辺でー

 

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください