【Vue.js】Vue3の無限スクロール用ライブラリ「v3-infinite-loading」を試してみた

概要

Vue.jsの無限スクロール用ライブラリを調べると、けっこう出てくるのがvue-infinite-loadingです。ただ、vue-infinite-loadingは直近メンテナンスされてる気配があまりなく、このままだとVue3では使用できない状態です。
Is there a version that can be used in vue3?のissueに、対応方法や代替ライブラリなど諸々紹介されています。今回は個人的に良いなと思った、Vue3対応の無限スクロール用ライブラリを紹介します。

今回試してみたライブラリ

v3-infinite-loadingというライブラリを今回試してみました。昨年の10月に作成されたばかりなので、まだ利用実績などあまり無いと思いますが、個人的にはシンプルで分かりやすい点が良かったです。ドキュメントはこちらにあります。

実装サンプル

無限スクロールの実装部分を紹介します。ユースケースとしては、カテゴリーの一覧を表示するというものになります。
なお、インストール手順はドキュメントを参照頂ければ大丈夫と思うので、割愛します。

<template>
  <div
    v-for="displayCategory in state.displayCategories"
    :key="displayCategory.id"
  >
     {{displayCategory.name}}
  </div>
  <InfiniteLoading
   :displayCategories="state.displayCategories"
   @infinite="load"
  >
    <template #complete>
      <span>読み込み終了</span>
    </template>
  </InfiniteLoading>
</template>

<script>
import { defineComponent, reactive } from "vue";
import InfiniteLoading from "v3-infinite-loading";
import "v3-infinite-loading/lib/style.css";

export default defineComponent({
  components: {
    InfiniteLoading,
  },
  async setup() {
    const state = reactive({
      displayCategories: [],
    });
    // 10件単位で読み込みを行うこととする
    const LOADING_COUNT = 10;

    const getAddDisplayCategory = (startIndex) => {
      // 表示するカテゴリーを追加で読み込む処理をここに書く（記載は割愛）
    };

    const load = async ($state) => {
      try {
        // 追加の読み込みで取得するカテゴリー
        const addingCategories = getAddDisplayCategory(
          state.displayCategories.length
        );
	// 表示するカテゴリーのstateを更新
        state.displayCategories =
          state.displayCategories.concat(addingCategories);
	// 10件未満だったらローディング完了にする
        if (addingCategories.length < LOADING_COUNT) {
          $state.complete();
        } else {
          $state.loaded();
        }
      } catch (error) {
        $state.error();
      }
    };
    
    return {
      state,
      load,
    };
  },
});
</script>