https://github.com/keno-lee/vue-tiny-virtual-list

【持续更新中】⚡️ 一个支持vue2&vue3的高性能虚拟(滚动)列表组件 👉🏻 轻量5KB 百万数据渲染 满帧率滚动 丰富场景支持 📑 [vue虚拟列表] [vue虚拟滚动列表][vue虚拟树] [vue-virtual-list] [vue-virtual-scroll-list] [vue-virtual-scroller] [vue-virt-tree]
https://github.com/keno-lee/vue-tiny-virtual-list

virt-list virtual-list virtual-scroll-list virtual-scroller virtualized-list vue-virt-tree vue-virtual-list vue-virtual-tree vue2 vue3

Last synced: about 2 months ago
JSON representation

【持续更新中】⚡️ 一个支持vue2&vue3的高性能虚拟(滚动)列表组件 👉🏻 轻量5KB 百万数据渲染 满帧率滚动 丰富场景支持 📑 [vue虚拟列表] [vue虚拟滚动列表][vue虚拟树] [vue-virtual-list] [vue-virtual-scroll-list] [vue-virtual-scroller] [vue-virt-tree]

• Host: GitHub
• URL: https://github.com/keno-lee/vue-tiny-virtual-list
• Owner: kolarorz
• License: mit
• Created: 2023-10-23T06:51:08.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2025-05-09T02:54:58.000Z (2 months ago)
• Last Synced: 2025-05-15T12:05:56.107Z (about 2 months ago)
• Topics: virt-list, virtual-list, virtual-scroll-list, virtual-scroller, virtualized-list, vue-virt-tree, vue-virtual-list, vue-virtual-tree, vue2, vue3
• Language: TypeScript
• Homepage: https://kolarorz.github.io/vue-virt-list/
• Size: 154 MB
• Stars: 351
• Watchers: 9
• Forks: 40
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-virt-list 虚拟列表 虚拟滚动列表 虚拟树









  

  

  



## Documentation

To check out docs, visit vue-virt-list

👉 Advantages

## Quick Start

```shell

npm install vue-virt-list -S

```

### Options API

```html

  


    

      

        
{{ index }} - {{ itemData.id }} - {{ itemData.text }}

      

    

  


  import { VirtList } from 'vue-virt-list';

  export default {

    components: { VirtList },

    data() {

      return {

        list: [{ id: 0, text: 'text' }],

      };

    },

  };

```

### Composition API

```html

  


    

      

        
{{ index }} - {{ itemData.id }} - {{ itemData.text }}

      

    

  


  import { ref, shallowRef } from 'vue';

  import { VirtList } from 'vue-virt-list';

  const list = ref([{ id: 0, text: 'text' }]);

  // 大数据建议使用 shallowRef: https://kolarorz.github.io/vue-virt-list/guide/instructions#shallowref

  // const list = shallowRef([{ id: 0, text: 'text' }])

```

## WeChat

有问题可扫码加好友进入技术交流群（备注github账号名&vue-virt-list）



## Sponsor

开源不易，如果帮助到你，请作者喝杯咖啡吧~





### 感谢您的慷慨

- AliPay

  - \*\*丹

  - \*\*平

  - \*\*理

- WechatPay

  - 甜言蜜语说给左耳听