vue3 虚拟滚动的一些实践

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

于是用起来。

好用，前提是看懂文档

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

// tempalte
<template>
<RecycleScroller
    :ref="(el) => setItemRef(el, tab.name)" // 需要绑到外部的div上，否则访问是instance
    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>
</template>

<script>
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
  // 适配兼容windowWidth
  if (!dbfn) {
    dbfn = debounce((domWidth) => {
      const windowWidth = window.innerWidth;
      const contentDomWidth = domWidth;
      let screenCode = 'xl';
      if (windowWidth >= 1920) {
        screenCode = 'xl';
      } else if (windowWidth >= 1200) {
        screenCode = 'lg';
      } else if (windowWidth >= 992) {
        screenCode = 'md';
      } else if (windowWidth >= 768) {
        screenCode = 'sm';
      }
      const padding = 8;
      scrollConfig.gridItems = gridItemMap[screenCode];
      const calWidth = Math.floor(
        (1 / gridItemMap[screenCode]) * contentDomWidth - padding,
      );
      const maxWidth = gridItemMaxWidthMap[screenCode];

      scrollConfig.itemSecondarySize =
        (maxWidth && (calWidth > maxWidth ? maxWidth : calWidth)) || calWidth;
    }, 500);
  }
  dbfn(RecycleScrollerRefMap[key].clientWidth);
};
</script>