vue-infinite-scrollで超簡単無限スクロールを実装する（vue.js）

Vue.jsで無限スクロールを実装したい場合は vue-infinite-scroll というライブラリを使用することをおすすめします。

超簡単に実装できます

公式ページはこちら

ライブラリのインストール

ライブラリをインストールします

npm install vue-infinite-loading -S

infinite-loadingコンポーネントを設置する

ライブラリをインストールしたらinfinite-loadingコンポーネントが使えるようになっているので、設置します。

@infiniteで定義するメソッドは、ページ最下部までスクロールしたときに発動されるメソッドになります。

<template>
  <div class="article-list">
    <div class="list">リスト1</div>
    <div class="list">リスト2</div>
    <div class="list">リスト3</div>
    .
    .
    . 
  </div>
  <infinite-loading @infinite="infiniteHandler")></infinite-loading>
</template>

スクロール時のロジックを組む

スクロールしたときにどういう処理を行うのかロジックを組みます。

スクロールしたときの処理は infiniteHandler に書いていきます。
これ以上スクロールすることないよ！って言う場合は $state.complete() を、まだスクロールは終わらないよ！っていうばあいは $state.loaded() を呼び出しましょう。

<template>
  <div class="article-list">
    <div class="list">リスト1</div>
    <div class="list">リスト2</div>
    <div class="list">リスト3</div>
    .
    .
    . 
  </div>
  <infinite-loading @infinite="infiniteHandler")></infinite-loading>
</template>

<script>
  methods: {
    // 無限スクロール
    infiniteHandler($state) {
      // 全部ロードし終わっていたら$state.complete(), まだあるなら $state.loaded()
      if (this.totalCount <= this.articles.length > 100) {
        $state.complete()
      } else {
        this.fetchArticles()
        $state.loaded()
      }
    },
    fetchArticles() {
      axios.get("https://*******").then((rs) => {
	this.articles.push(rs.data.articles)
	this.totalCount = rs.data.total
      })
    }
  }
</script>

実はこれだけで無限スクロールができちゃうんです！！

データがない場合の表示を変える

デフォルトでは、これ以上フェッチするデータがないよ！という時は「No more data :) 」という表示が出て、 そもそも検索結果がないよーっていうときに「No results :( 」と表示されます。

まあデフォルトだと味気ないかなーということで、ここをカスタムしていきます

infinite-loadingのコンポーネント内に span slot="no-more" と span slot="no-results" を追加します。これだけでOK！

<template>
  <div class="article-list">
    <div class="list">リスト1</div>
    <div class="list">リスト2</div>
    <div class="list">リスト3</div>
    .
    .
    . 
  </div>
  <infinite-loading @infinite="infiniteHandler")>
    <span slot="no-more">これ以上データはありません</span> // ← ここ追加
    <span slot="no-results">検索結果はありません</span> // ← ここ追加
  </infinite-loading>
</template>

<script>
  methods: {
    // 無限スクロール
    infiniteHandler($state) {
      // 全部ロードし終わっていたら$state.complete(), まだあるなら $state.loaded()
      if (this.totalCount <= this.articles.length > 100) {
        $state.complete()
      } else {
        this.fetchArticles()
        $state.loaded()
      }
    },
    fetchArticles() {
      axios.get("https://*******").then((rs) => {
	this.articles.push(rs.data.articles)
	this.totalCount = rs.data.total
      })
    }
  }
</script>

終わりに

ほんの一瞬で無限スクロールが実装できました！
jQueryでやったときは結構たいへんだったのに...

ライブラリを使うとかんたんなので、みなさんもぜひやってみてください！