33
23

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

vuejsで無限ロードを実装

Last updated at Posted at 2016-09-06

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

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を使うことにした。

33
23
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
33
23

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?