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 只是範例樣式，庫本身不提供。