MR-yuhuashi / vue-tiny-virtual-list

⚡️ High performance & Full frame rate & Virtual render & Huge amount data (support vue2.x&vue3.x) 虚拟列表 虚拟滚动列表 高性能 百万级数据 满帧渲染

vue-tiny-virtual-list 虚拟列表 虚拟滚动列表

中文文档

👉 Advantages

👉 Live demo

Advantages

• Tiny: 8K (gzipped 3k)
• Works for both Vue 3 and 2 (Use vue-demi)
• Millions of data, high performance, full frame rate rendering
• Supports horizontal and vertical scrolling
• Typescript support
• Supports smooth scrolling upwards
• Scroll without losing selection
• O(1) complexity rolling increment calculation
• Supports a variety of slots to choose from, and supports expansion in various scenarios (tables, wireless loading, chat rooms, merged cells, etc.)

Start

npm install vue-tiny-virtual-list -S

<template>
  <div style="width: 500px; height: 400px">
    <VirtualList itemKey="id" :list="list" :minSize="20">
      <template #default="{ itemData }">
        <div>{{ itemData.id }} - {{ itemData.text }}</div>
      </template>
    </VirtualList>
  </div>
</template>

<script>
  import { VirtualList } from 'vue-tiny-virtual-list';
  export default {
    components: { VirtualList },
    data() {
      return {
        list: [{ id: 0, text: 'text' }],
      };
    },
  };
</script>

Attributes

Name	Description	Type	Default	Required
list	data list	Array	-	false
itemKey	list item id	String Number	-	true
minSize	Minimum size, the number in the visible area will be calculated based on this size	Number	-	true
fixed	Fixed height mode can improve performance	Number	-	false
buffer	When the amount of rendering is large and the scrolling white screen is serious, you can give values, and bufferTop and bufferBottom will be equal to buffer	Number	0	false
bufferTop	buffer for top	Number	0	false
bufferBottom	buffer for bottom	Number	0	false
horizontal	horizontal mode	Boolean	false	false

slot

name	Description
header	header slot
footer	footer slot
sticky-header	sticky header slot
sticky-footer	sticky footer slot