mr-yuhuashi / vue-tiny-virtual-list Goto Github PK

View Code? Open in Web Editor NEW

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

JavaScript 1.71% TypeScript 55.25% HTML 0.61% Vue 42.42%

vue-tiny-virtual-list's Introduction

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`