@fcli/vue-virtually-list NPM

vue-auto-scroll

VUE3 虚拟列表，支持动态计算数据高度

npm install @fcli/vue-virtually-list --save-dev 来安装

在项目中使用
import VueVirtuallyList from '@fcli/vue-virtually-list';
const app=createApp(App)
app.use(VueVirtuallyList);

示例：

<div class="content">
  <vue-virtually-list :data="list" :height="400" :width="600" :itemCount="1000" :itemEstimatedSize="20" :buffCount="50">
    <template #slot-scope="{slotProps}">
      <div class="li">{{ slotProps.data.text }}</div>
    </template>
  </vue-virtually-list>
</div>

属性	属性名称	类型	可选值
data	列表数据	Array	[]
height	虚拟容器的高度	number	0
width	虚拟容器的宽度	number	0
itemCount	滚动列表的条数	number	0
itemEstimatedSize	预设每行数据的高度	number	可不填，组件会动态计算
buffCount	上下缓冲区的条数	number	增加快速滚动时的流畅性
#slot-scope	插槽｜ object ｜ slotProps.data｜

slot

例：

  <template #slot-scope="{slotProps}">
    <div class="li">{{ slotProps.data.text }}</div>
  </template>

@everything-registry/sub-chunk-316

1.0.0

2 years ago