Vue-infinite-loadingがとても便利だった話
ウェッブフロントではありがちなスクロールして無限にコンテンツを読み込んでいくアレを作る時にあっというまに実現できたのでメモ。 ReactjsやろうやろうとしてたらVuejsになっていました(?)
導入
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内の下部にこんな感じに設置。
この要素の下部にロードするイベントのラインがあるようで、
スライダーだの位置だのとりあえずは気にになくても動くものが書けちゃうのはかなりいいなって思います。
js
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
で簡単に表示できて感動したという話はまたいつか。