虚拟滚动列表

示例

下面是一个虚拟列表加载 100000 条数据的情况

切换到真实列表加载的时候加载会明显卡顿3s(我的电脑是这情况) 虚拟列表点击后就可以出来 另外滑动加载或者拖动右侧滑块的时候 真实列表会逐渐显示(1s内显示，能看到加载从无到有的过程) 虚拟列表则是拖动就可以出来

点击下面👇的切换体验一下两者效果

源码

<template>
    <n-switch v-model:value="isVirtual" @change="toggleVirtual">
        <template #checked>
            虚拟列表
        </template>
        <template #unchecked>
            真实列表
        </template>
    </n-switch>

    <div v-if="isVirtual">
        <h3>虚拟列表</h3>
        <div v-bind="containerProps" class="virtual_list">
            <div v-bind="wrapperProps">
                <div v-for="item in list" :key="item.index" style="height: 22px">
                    Row: {{ item.data + 1 }}
                </div>
            </div>
        </div>
    </div>
    <div v-if="!isVirtual">
        <h3>真实列表</h3>
        <div class="virtual_list">
            <div>
                <div v-for="item in 100000" :key="item.index" style="height: 22px">
                    Row: {{ item }}
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, nextTick } from 'vue'
import { useVirtualList } from '@vueuse/core'
import { NSwitch} from 'naive-ui'

const isVirtual = ref(true)

const { list, containerProps, wrapperProps } = useVirtualList(
    Array.from(Array(100000).keys()),
    {
        // Keep `itemHeight` in sync with the item's row.
        itemHeight: 22,
    },
)

</script>
<style scoped lang="scss">
.virtual_list {
    border-radius: 8px;
    padding-left: 10px;
    height: 300px;
    overflow: auto;
    background: #eee;
}
</style>