Liste virtuelle

Solution de performance pour les longues listes : seuls les éléments de la zone visible sont rendus. Mode hauteur fixe avec itemHeight, mode hauteur dynamique avec la fonction itemSize.

Liste virtuelle

<template>
  <div class="demo-col">
    <p class="demo-note">Mode hauteur fixe : itemHeight + overscan, mille entrées ne rendent que la zone visible</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">Mode hauteur dynamique : itemSize renvoie la hauteur de chaque élément</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 }} (hauteur {{ sizeOf(index) }}px)
        </div>
      </template>
    </LhVirtualList>
  </div>
</template>

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

Props

Prop	Description	Type	Valeur par défaut
data	Source de données (le rendu des éléments est assuré par le slot default)	any[]	—
height	Hauteur du conteneur (un nombre correspond à des px)	number \| string	—
itemHeight	Hauteur des éléments en mode hauteur fixe (mutuellement exclusif avec itemSize ; si itemSize est fourni, le mode hauteur dynamique est utilisé)	number	—
itemSize	Mode hauteur dynamique : l'appelant renvoie la hauteur de chaque élément	(index: number) => number	—
overscan	Nombre d'éléments de surbalayage (overscan)	number	—
sx	Propriétés de mise en page rapide	—	—

Slots

Slot par défaut (paramètres de portée : item (donnée), index) : rendu des éléments de liste.

Astuce

Le .vl-item de la démo n'est qu'un style d'exemple, il n'est pas fourni par la bibliothèque.