まずライブラリで対応出来ないか検討した。
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を使うことにした。