Skip to content

topul/virtual-list

Repository files navigation

基于Vue3开发的虚拟滚动列表

安装

npm i tp-virtual-list

使用实例

<script setup>
import VirtualList from 'tp-virtual-list'
import 'tp-virtual-list/dist/style.css'
import { ref } from 'vue';

const data = ref([])

const arr = []
for (let index = 0; index < 100000; index++) {
  arr.push({
    label: `item ${index}`,
    value: index
  })
}
data.value = arr
</script>

<template>
  <VirtualList :data="data" style="height: 500px" :scrollToIndex="10000">
    <template #default="{ item }">
      <div>{{ item.label }}</div>
    </template>
  </VirtualList>
</template>

属性

属性名 类型 描述 必须 默认值
data Array 列表数据
itemHeight Number 每行的高度 50
buffer Number 可视区域上下各多渲染多少条数据 10
scrollToIndex Number 默认滚动到第几条 0

About

基于vue3的虚拟列表组件

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published