Vue 3とTypeScriptで仮想スクロールを実装: 「vue-virtual-scroller」の使い方

npm install --save vue-virtual-scroller@next

<template>
  <v-container class="list">
    <!-- item-sizeにアイテムの高さを指定する -->
    <recycle-scroller
      class="scroller"
      :items="list"
      :item-size="300"
      key-field="id"
      v-slot="{ item }"
    >
    <v-card width="400">
      <v-img
        :height="200"
        :src="item.imageSrc"
        cover
        class="text-white"
      >
        <v-toolbar
          color="rgba(0, 0, 0, 0)"
          theme="dark"
        >
          <v-toolbar-title class="text-h6">
            {{item.text}}
          </v-toolbar-title>
          <template v-slot:append>
            <v-btn icon="mdi-dots-vertical"></v-btn>
          </template>
        </v-toolbar>
      </v-img>
      <v-card-text>
        テキスト
      </v-card-text>
    </v-card>
    </recycle-scroller>
  </v-container>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, type Ref } from 'vue';
// RecycleScrollerをインポート
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

export default defineComponent({
  name: 'VueVirtualScrollerPane',
  components: {
    RecycleScroller
  },
  setup () {
    /**
     * リストアイテムの配列
     */
    const list = ref([]) as Ref<Array<{ id: number, imageSrc: string, text: string }>>
    /**
     * #onMounted
     * リストアイテムを100件に増やしている
     */
    onMounted(() => {
      for (let index = 0; index < 100; index++) {
        list.value.push({
          id: index,
          imageSrc: 'https://cdn.vuetifyjs.com/docs/images/cards/purple-flowers.jpg',
          text: `Messages${index}`
        })
      }
    })
    return {
      list
    }
  }
})
</script>

<style scoped>
/** recycle-scrollerコンポーネントで固定の高さを確保し、 overflow-y: scroll;を指定する必要がある。*/
.scroller {
  height: 70vh;
  overflow-y: scroll;
}
</style>

<template>
  <v-container class="container">
    <DynamicScroller
      class="scroller"
      :items="list"
      :min-item-size="200"
      key-field="id"
      item-class="original-scroller-item"
    >
    <template v-slot="{ item, index, active }">
      <DynamicScrollerItem
        :item="item"
        :active="active"
        :data-index="index"
        :size-dependencies="[item.imageSrc, item.text]"
      >
        <v-card>
          <img
            :src="item.imageSrc"
            class="text-white"
          >
          <div class="pb-6">
            テキスト
          </div>
        </v-card>
      </DynamicScrollerItem>
    </template>
    </DynamicScroller>
  </v-container>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, type Ref } from 'vue';
// RecycleScrollerをインポート
import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

const images = [
  'https://cdn.pixabay.com/photo/2023/08/28/23/17/superb-fairywren-8220199_1280.jpg',
  'https://cdn.pixabay.com/photo/2023/09/04/13/17/mushrooms-8232731_1280.jpg',
  'https://cdn.vuetifyjs.com/images/cards/plane.jpg',
  'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
]

export default defineComponent({
  name: 'VueVirtualScrollerPane',
  components: {
    DynamicScroller,
    DynamicScrollerItem
  },
  setup () {
    /**
     * リストアイテムの配列
     */
    const list = ref([]) as Ref<Array<{ id: number, imageSrc: string, text: string }>>

    /**
     * ランダムに画像を抽出する
     */
    const getRandomImage = () => {
      const randomIndex = Math.floor(Math.random() * images.length);
      return images[randomIndex];
    }
    /**
     * #onMounted
     * リストアイテムを100件に増やしている
     */
    onMounted(() => {
      for (let index = 0; index < 100; index++) {
        list.value.push({
          id: index,
          imageSrc: getRandomImage(),
          text: `Messages${index}`
        })
      }
    })
    return {
      list
    }
  }
})
</script>

<style scoped>
.container {
  width: 400px;
}
/** recycle-scrollerコンポーネントで固定の高さを確保し、 overflow-y: scroll;を指定する必要がある。*/
.scroller {
  height: 80vh;
  overflow-y: scroll;
}
img {
  max-width: 100%;
}
</style>