虚拟列表

只渲染可视区数据，提升速度和性能

test_1

test_2

test_3

test_4

test_5

test_6

test_7

test_8

test_9

test_10

test_11

test_12

test_13

test_14

test_15

test_16

test_17

test_18

基础使用

这是 虚拟列表 的基础例子

<script setup lang="ts">
const data = Array.from({ length: 1000 }).map((_, idx) => ({
  id: idx + 1,
  name: `test_${idx + 1}`,
}))

function handleClick(item: any) {
  console.log(item)
}
</script>

<template>
  <div class="virtual-list">
    <np-list :data="data" @click-item="handleClick">
      <template #default="{ item }">
        <div class="data-item">
          {{ item.name }}
        </div>
      </template>
    </np-list>
  </div>
</template>

<style scoped>
.data-item {
  height: 100%;
  display: flex;
  align-items: center;
}
</style>