Vue-infinite-loadingがとても便利だった話

ウェッブフロントではありがちなスクロールして無限にコンテンツを読み込んでいくアレを作る時にあっというまに実現できたのでメモ。 ReactjsやろうやろうとしてたらVuejsになっていました（？）

peachscript.github.io

導入

npm install vue-infinite-loading --save

あとはimportしてレッツトライ

import Vue from 'vue'
...
import InfiniteLoading from 'vue-infinite-loading';

動かす

html

<infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
    <span slot="no-more">
        no more contents dorobow.
    </span>
</infinite-loading>

HTML内の下部にこんな感じに設置。
この要素の下部にロードするイベントのラインがあるようで、スライダーだの位置だのとりあえずは気にになくても動くものが書けちゃうのはかなりいいなって思います。

window.onload = () => {
    vue = createVue();
};

const createVue = () => {
    return new Vue({
        el: '#list-listtt',
        data: {
            contents: [],
        },
        created() {
            //初期表示分はここで
            hogeAPI.GET_CONTENTS_INDEX()
                .then( res => {
                    this.contents = res
                }
        },
        components: {
            //↑でimportしたやつです
            InfiniteLoading,
        },
        methods: {
            //画面下部に行った時の処理はここに。
            onInfinite() {
                hogeAPI.GET_CONTENTS_MORE()
                    .then((res) => {
                        if(res.length > 0) {
                            this.articles.push(...res['posts']);
                            //記事読み込み終了する
                            this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
                        } else { 
                            //記事がなかったらロード自体終了する                          
                            this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                        }
                    })
                    .catch(( err) => {                    
                            this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                            console.log(err);
                    )}
            }
        },
    });
};

ここでは使っていませんがcompleteでイベントを終わらせたとしても、$InfiniteLoading:resetとすればまた下部のボーダーを超えると読み込みます。こんな感じでロード終了時の出力を簡単にカスタムできたり、ロード中のくるくるもカスタマイズができます。

ここで使っているAPIのレスポンスがwordpressで作られたHTMLタグ混合のなかなかテキストだったけれど
v-htmlで簡単に表示できて感動したという話はまたいつか。