@wefly/vue-virtual-scroller

A virtual rolling component based on Vue 3.0

Usage no npm install needed!

<script type="module">
  import weflyVueVirtualScroller from 'https://cdn.skypack.dev/@wefly/vue-virtual-scroller';
</script>

README

vue-virtual-scroller

一款基于vue3.0的虚拟滚动组件

A virtual rolling component based on vue3.0。

https://img.shields.io/npm/v/@wefly/vue-virtual-scroller.svg?label=@wefly/vue-virtual-scroller 总下载量

安装/Install

npm/cnpm install @wefly/vue-virtual-scroller --save / yarn add @wefly/vue-virtual-scroller

使用/Use

// main.ts/js
import VueVirtualScroll from '@wefly/vue-virtual-scroller';
import '@wefly/vue-virtual-scroller/dist/style.css';

Vue.use(VueVirtualScroll);

// 局部注册
// *.vue
import { VueVirtualScroller } from '@wefly/vue-virtual-scroller';
import '@wefly/vue-virtual-scroller/dist/style.css';

// template
<vue-virtual-scroller
    :list="list"
    reScrollKey="blogHome"
>
    <template v-slot:header>
        <div>header</div>
    </template>
    <template v-slot:default="slotProps">
        <BlogHomeList :item="slotProps.item" />
    </template>
    <template v-slot:footer>
        <div>footer</div>
    </template>
</vue-virtual-scroller>

// script
components: {
    'vue-virtual-scroller': VueVirtualScroller
}
参数/params
key require default type discribe
list 是 [] Array data
ownKey 否 index string key
buffer 否 10 number 缓冲长度
activeLen 否 30 number 渲染总长度
reScrollKey 否 string 离开列表是否需要保存滚动位置
direction 否 'vertical' string 滚动方向