無限スクロールしたいなぁと思ったら、
vue-infinite-loadingという便利があったので、その時の備忘録。

おぉ無限スクロールもできた(*´ω｀*)
Vueもvue-infinite-loadingもすごい(*´ω｀*) pic.twitter.com/dtp1sxYUyz
— きらぷか📚積読ハウマッチ開発中【事前登録はじめました】 (@kira_puka) July 6, 2019

準備する

インストール

$ npm i --save vue-infinite-loading

pluginの作成

plugins/vue-infinite-loading.tsを用意

import Vue from "vue";
import InfiniteLoading from "vue-infinite-loading";

Vue.use(InfiniteLoading);

nuxt.config.tsの設定

作ったpluginを追加する。

const config: NuxtConfiguration = {
  plugins: [
    { src: "~/plugins/vue-infinite-loading", ssr: false },
  ],
}

つかってみる

シンプルにはこんな感じ。

リストの最後にinfinite-loadingを追加して、
リストの一番下に来たら、@infinite="infiniteHandler"が発火
infiniteHandler()で次を読み込んで、itemsに追加

<template>
  <div>
    <template v-for="item in items">
      <!-- リストとして表示するなにか -->
    </template>
    
    <infinite-loading :identifier="identifier" @infinite="infiniteHandler">
      <!-- slotでメッセージをカスタマイズできる -->
      <div slot="no-more">もう読み込めないときのメッセージ</div>
      <div slot="no-results">結果がないときのメッセージ</div>
    </infinite-loading>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class extends Vue {
  items: any[] = []
  identifier: number = 1
  loading: boolean = false;
  
  async infiniteHandler($state: any) {
    if (this.loading) return; // 読み込み中ならスキップ
    
    try {
      this.loading = false;
      const res = await this.$axios.get("...");
      this.items.push(...res);
      
      // 読み込みが終わって、まだ読み込めればloaded()を呼ぶ
      $state.loaded();
    } catch(error) {
      // もう読み込めなければcomplete()を呼ぶ
      $state.complete();
    } finally {
      this.loading = false;
    }
  } 
}