vue-virt-list
vue-virt-list copied to clipboard
⚡️ 一个支持vue2&vue3的高性能虚拟(滚动)列表组件 👉🏻 轻量3KB 百万数据渲染 满帧率滚动 丰富场景支持 📑 [vue虚拟列表] [vue虚拟滚动列表] [vue-virtual-list] [vue-virtual-scroll-list] [vue-virtual-scroller...
vue-virt-list 虚拟列表 虚拟滚动列表
扫码加好友进入技术交流群
Documentation
To check out docs, visit vue-virt-list
Quick Start
npm install vue-virt-list -S
Options API
<template>
<div style="width: 500px; height: 400px">
<VirtList itemKey="id" :list="list" :minSize="20">
<template #default="{ itemData, index }">
<div>{{ index }} - {{ itemData.id }} - {{ itemData.text }}</div>
</template>
</VirtList>
</div>
</template>
<script>
import { VirtList } from 'vue-virt-list';
export default {
components: { VirtList },
data() {
return {
list: [{ id: 0, text: 'text' }],
};
},
};
</script>
Composition API
<template>
<div style="width: 500px; height: 400px">
<VirtList itemKey="id" :list="list" :minSize="20">
<template #default="{ itemData, index }">
<div>{{ index }} - {{ itemData.id }} - {{ itemData.text }}</div>
</template>
</VirtList>
</div>
</template>
<script setup lang="ts">
import { ref, shallowRef } from 'vue';
import { VirtList } from 'vue-virt-list';
const list = ref([{ id: 0, text: 'text' }]);
// 大数据建议使用 shallowRef,自行使用renderKey控制响应式,具体参考demo文档:
// https://keno-lee.github.io/vue-virt-list/examples/huge-data/
// const list = shallowRef([{ id: 0, text: 'text' }])
</script>