Virtual list

Dynamic height

s-virtual-list only mounts rows near the viewport. It measures each rendered row, so wrapped text, expand/collapse state, and appended content retain correct offsets and scroll anchoring.

Code copied

<template>
  <div class="virtual-list-demo">
    <s-button size="small" @click="append">Append 20 rows</s-button>
    <s-virtual-list
      :items="items"
      :height="320"
      :estimate-size="64"
      :overscan="8"
      :item-key="(item) => item.id"
      class="virtual-list-demo__list"
    >
      <template #default="{ item, index }">
        <article
          class="virtual-list-demo__row"
          @click="item.expanded = !item.expanded"
        >
          <strong>#{{ index + 1 }} {{ item.title }}</strong>
          <p>{{ item.body }}</p>
          <p v-if="item.expanded" class="virtual-list-demo__detail">