基于vue3.0封装的虚拟滚动插件-vue-virtual-scroller

众所周知，当节点达到一定数量的时候，前端就会产生很大的性能问题，那么我们应该怎么来改善这种局面呢，没错，就是所谓的虚拟滚动，其实就是几个节点在滚动的时候移来移去，非常的乏味。

其实很早之前就已经研究过，记得当时谷歌就已经有提出创建可回收节点的api，这么多年过去了，也没有去关注有没有去继续推动了，大概就是会有个原生的createCycleElement这种的api出现，尝试过在孤高度不一致的列表里，位置计算会有问题。

直至vue3.0正式发布，又开始了造轮子的道路，于是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	滚动方向