針對過多資料列表展示造成過多節點渲染使頁面卡死或卡頓，特地封裝一個簡易的虛擬列表，大家可在此基礎上進行針對修改
元件基於 vue3 + element plus + ts + tailwindcss 開發

## 設計思路

分為三部分：

* 父容器佔位；
* 一個子容器展示透過捲軸計算的資料相當於真實渲染節點；
* 一個子容器作為虛擬列表不渲染列表提供列表真實高度顯示捲軸

## 實現

### 頁面結構

```html
  <el-scrollbar class="scrollbar_custom px-4" :height="virtualRecord.height">
    
    <div class="-z-10 absolute inset-0" :style="{ height: virtualRecord.virtualHeight + 'px' }"></div>
    
    <ul :class="['absolute inset-0', prop.customClass]" :style="{ transform: `translateY(${virtualRecord.offset}px)` }">
      <li v-for="(item, index) in virtualRecord.visibleData" :key="index + '_'" :style="{
          height: virtualRecord.itemHeight + 'px',
        }" class="hover:bg-anyrtc-gray_8 text-sm">
        
        <slot :item="item"></slot>
      </li>
    </ul>
  </el-scrollbar>
```

### 樣式

修改 element plus 的 scrollbar 樣式

```css
.scrollbar_custom {
 :deep(.el-scrollbar__wrap) {
  .el-scrollbar__view {
    @apply relative;
  }
}
```

### 邏輯

#### 元件所需引數

```ts
const prop = defineProps({
  // 自定義類名
  customClass: String,
  // 相關配置
  option: {
    type: Object,
    default: () => {
      return {};
    },
  },
  listData: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
```

#### 元件內部定義

```ts
// 元件記錄(預設)
const virtualRecord = reactive({
  height: 400,
  // 展示幾個
  visibleCount: 16,
  // // 重新整理頻率
  timeout: 4,
  // // 行高
  itemHeight: 40,
  // translateY偏移量
  offset: 0,
  // 虛擬佔位高度
  virtualHeight: 300,

// 記錄滾動高度
  recordScrollTop: 0,

dataList: [] as any[],
  // 可展示的資料
  visibleData: [] as any[],
});

// 合併配置
const mergeFn = () => {
  virtualRecord.height = prop.option.height || 400;
  virtualRecord.dataList = JSON.parse(JSON.stringify(prop.listData));
  virtualRecord.itemHeight = prop.option.itemHeight || 40;
  virtualRecord.timeout = prop.option.timeout || 4;
  // // 虛擬高度
  virtualRecord.virtualHeight = prop.listData.length * virtualRecord.itemHeight;

// 展示數量
  virtualRecord.visibleCount = Math.ceil(
    virtualRecord.height / virtualRecord.itemHeight
  );
};
```

#### 滾動計算

```ts
let lastTime = 0;
const handleScroll = (scroll: { scrollTop: number }) => {
  let currentTime = +new Date();
  if (currentTime - lastTime > virtualRecord.timeout) {
    virtualRecord.recordScrollTop = scroll.scrollTop;
    updateVisibleData(scroll.scrollTop);
    lastTime = currentTime;
  }
};
const updateVisibleData = (scrollTop: number) => {
  let start =
    Math.floor(scrollTop / virtualRecord.itemHeight) -
    Math.floor(virtualRecord.visibleCount / 2);
  start = start < 0 ? 0 : start;
  const end = start + virtualRecord.visibleCount * 2;
  virtualRecord.visibleData = virtualRecord.dataList.slice(start, end);
  virtualRecord.offset = start * virtualRecord.itemHeight;
};
```

#### 列表資訊變更

```ts
watch(
  () => {
    return [prop.listData, prop.option];
  },
  ([newData, newHeight]) => {
    if (newData) {
      // 合併資料
      mergeFn();
      // 更新檢視
      updateVisibleData(virtualRecord.recordScrollTop);
    }
  },
  {
    immediate: true,
  }
);
```

#### 使用

```html
<virtualitem :option="{height：'佔位高度'}" :list-data="列表">
  <template item="">
   {{ item }}
  </template>
</virtualitem>
```

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/26810b996277464b84d67159a9f33b9e.jpeg#pic_center)

web技術分享| 虛擬列表實現

相關文章