[vue] 大資料最佳化之虛擬滾動

深海里的星星i發表於2024-09-02
Vue大資料
<template>
  <div class="container" ref="scrollRef" @scroll="scroll">
    <div
      class="plc"
      :style="'height: ' + list.length * 60 + 'px;padding-top: ' + paddingTop + 'px'"
    >
      <div class="item" v-for="item in renderList" :key="item.id">{{ item.str }}</div>
    </div>
  </div>
</template>

<script setup>
const list = ref([]);
const paddingTop = ref(0);
const renderLen = Math.floor(window.innerHeight / 60);
const extraRenderLen = 10;
const startIndex = ref(0);
const renderList = computed(() => {
  return list.value.slice(
    startIndex.value,
    startIndex.value + renderLen + extraRenderLen * 2
  );
});

function initData() {
  for (let i = 0; i < 10000; i++) {
    list.value.push({
      str: i,
      id: i,
    });
  }
}

const scrollRef = ref();
function scroll() {
  const top = scrollRef.value.scrollTop;
  // 捲進去了多少條資料
  const jump = Math.floor(top / 60);
  startIndex.value = jump - extraRenderLen > 0 ? jump - extraRenderLen : 0;
  paddingTop.value = startIndex.value * 60;
}

initData();
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  overflow-y: scroll;

  .plc {
    .item {
      height: 60px;
      background: pink;
      border: 4px solid #fff;
      border-radius: 10px;
      font-size: 40px;
    }
  }
}
</style>

案例為vue SFC, 使用了 unplugin-auto-import 外掛,所以 沒有引入 ref computed 等函式

本來想用plc的固定高度撐開 Container 容易, 實現捲軸的自適應計算, 結果設定 overflow-y: scroll 之後, 捲軸直接不顯示了

所以, 預計, 只在 item 外面套一個盒子, 也能達到這種 無捲軸 的 虛擬滾動列表 了

如果有什麼解決辦法, 歡迎提出來!!!

結果如圖

相關文章