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 인덱스): 목록 항목 렌더링.

팁

데모의 .vl-item 는 예시 스타일일 뿐, 라이브러리 자체에서 제공하지 않습니다.