vue3 虚拟滚动的一些实践

看到这个vueuse库打开新天地后，看到一句warning： Consider using vue-virtual-scroller instead, if you are looking for more features.

于是用起来。

好用，前提是看懂文档

业务需要使用grid，它的grid竟然不是css，而是js计算

// tempalte
<RecycleScroller
            :ref="(el) => setItemRef(el, tab.name)"
            class="test-scroller" // css必须定义高度
            :items="items"
            keyField="id"
            v-bind="{ ...scrollConfig }"
            itemClass="recycle-scroll-item"
            @resize="handleScrollResize(tab.name)"
          >
<template v-slot="{ item:}">
// xxx组件
</template>
</RecycleScroller>

// js：
const RecycleScrollerRefMap = {};
const setItemRef = (el, key) => {
  if (el) {
    RecycleScrollerRefMap[key] = el;
  }
};
const scrollConfig = {
  itemSize: 360, // 高
  minItemSize: 360, // 高
  itemSecondarySize: 408, // 宽
  gridItems: 4, 
};
const handleScrollResize = (key) => {
  console.log('*******', RecycleScrollerRefMap[key]); // 打印出来竟然是 VueInstance
};