JavaScript
vue.js

vuejsで無限ロードを実装

More than 1 year has passed since last update.

まずライブラリで対応出来ないか検討した。

vue-infinite-scroll

サンプルを触ってみたところ、infinite-scroll-distanceでしきい値を決めて、その高さが画面に入ったらローディングを初めるライブラリのようだ。

vue-infinite-loading

サンプルを触ってみたところ、vue-infinite-scrollと同じくdistanceでしきい値を決めて、その高さが画面に入ったらローディングを初める。

infinite-scroll-distanceとの違いは、おそらく<infinite-loading :on-infinite="onInfinite"></infinite-loading>を書いた場所の親要素の下部がしきい値になっていることである。

https://peachscript.github.io/vue-infinite-loading/#!/spinners によると、ローディングのデザインは5種類から選ぶことが出来る。

v-ifを使うことで、ローディングを終了することが出来る。
https://peachscript.github.io/vue-infinite-loading/#!/properties

まとめ

vue-infinite-loadingを使うことにした。