VirtualList 仮想リスト

長いリストのパフォーマンス方案です。表示領域内の項目のみをレンダリングします。固定高モードでは itemHeight を、動的高モードでは itemSize 関数を使います。

仮想リスト

<template>
  <div class="demo-col">
    <p class="demo-note">固定高モード：itemHeight + overscan。千件のデータでも表示領域のみをレンダリング</p>
    <LhVirtualList :data="items" :height="240" :item-height="36" :overscan="6">
      <template #default="{ item, index }">
        <div class="vl-item" :style="{ background: index % 2 ? 'transparent' : 'var(--lh-fill-color, #f6f1ea)' }">
          {{ index + 1 }}. {{ item }}
        </div>
      </template>
    </LhVirtualList>
    <p class="demo-note">動的高モード：itemSize が各項目の高さを返す</p>
    <LhVirtualList :data="items" :height="200" :item-size="sizeOf">
      <template #default="{ item, index }">
        <div class="vl-item" :style="{ height: sizeOf(index) + 'px' }">
          {{ index + 1 }}. {{ item }}（高さ {{ sizeOf(index) }}px）
        </div>
      </template>
    </LhVirtualList>
  </div>
</template>

<script>
export default {
  data: () => ({
    items: Array.from({ length: 1000 }, (_, i) => `画作項目 ${i + 1}`),
  }),
  methods: {
    sizeOf(index) {
      return 28 + (index % 5) * 14
    },
  },
}
</script>

Props

プロパティ	説明	型	デフォルト値
data	データソース（項目のレンダリングは default スロットが担う）	any[]	—
height	コンテナの高さ（数値は px）	number \| string	—
itemHeight	固定高モードの項目の高さ（itemSize とどちらか一つ。itemSize を渡すと動的高になる）	number	—
itemSize	動的高モード：呼び出し側が各項目の高さを返す	(index: number) => number	—
overscan	オーバースキャンする項目数	number	—
sx	sx によるレイアウト省略記法	—	—

Slots

デフォルトスロット（スコープ引数：item データ項目、index インデックス）：リスト項目のレンダリングです。

ヒント

demo の .vl-item はサンプル用のスタイルであり、ライブラリ自身は提供しません。