قائمة افتراضية 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	ارتفاع العنصر في الوضع ذي الارتفاع الثابت (يُختار واحد من itemHeight و itemSize؛ وعند تمرير itemSize يُعتمد الارتفاع الديناميكي)	number	—
itemSize	وضع الارتفاعات الديناميكية: يُعيد مُستدعيها ارتفاع كل عنصر	(index: number) => number	—
overscan	عدد العناصر الإضافية المعروضة خارج المنطقة المرئية	number	—
sx	خاصية sx المختصرة للتخطيط	—	—

Slots

الفتحة الافتراضية (المعاملات النطاقية: item عنصر البيانات، وindex الفهرس): عرض عناصر القائمة.

تلميح

.vl-item في العرض التجريبي مجرد نمط للمثال، ولا توفّره المكتبة نفسها.