快捷導(dǎo)航

vue3實現(xiàn)長列表虛擬滾動的示例代碼

更新時間：2025年01月10日 09:45:13 作者：jjw_zyfx

本文主要介紹了vue3實現(xiàn)長列表虛擬滾動的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1、直接看代碼

<template>
  <!--定義一個大容器，此容器可以滾動-->
  <div class="view" ref="viewRef" @scroll="handleScroll">
    <!--定義一個可以撐滿整個data的容器，主要是讓父元素滾動起來-->
    <div class="phantom" :style="{ height: `${itemSize * data.length}px` }"></div>
    <!--顯示元素列表   因為list也是絕對定位，當父元素進行滾動時，父元素需要平移來表示滾動(實際是看到的是沒有滾動)-->
    <div class="list" :style="{ transform: `translateY(${translateLen}px)` }">
      <!--顯示每條數(shù)據(jù)-->
      <div v-for="item in visibleList" :style="{ height: `${itemSize}px` }">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script setup>
import {computed, reactive, ref} from 'vue';

//模擬請求回來的數(shù)據(jù)
const data = reactive((() => {
  const arr = [];
  for (let i = 0; i < 1000000; i++) arr[i] = i;
  return arr;
})());
// 每條數(shù)據(jù)占據(jù)的高度像素值
const itemSize = 40
// 移動的距離
const translateLen = ref(0);
// 綁定的元素
const viewRef = ref(null);
// 從那條數(shù)據(jù)開始取值
const start = ref(0);
// 可視區(qū)顯示的條數(shù)
const visibleCount = computed(() => Math.ceil(viewRef.value?.clientHeight / itemSize));
// 可視區(qū)顯示的數(shù)據(jù)內(nèi)容(即需要渲染的所有數(shù)據(jù)內(nèi)容)
const visibleList = computed(() => data.slice(start.value, start.value + visibleCount.value));
// 滾動起來后需要處理的顯示的開始位置和要移動的距離
const handleScroll = () => {
  const scrollTop = viewRef.value.scrollTop;
  start.value = Math.floor(scrollTop / itemSize);
  console.log("scrollTop==>", scrollTop)
  translateLen.value = scrollTop
  console.log("translateLen.value==>", translateLen.value)
}

</script>

<style scoped>
.view {
  position: relative;
  height: 400px;
  width: 400px;
  overflow: auto;
}

.phantom {
  /* 必須要絕對定位 */
  position: absolute;
  width: 100%;
  background-color: pink;
}

.list {
  /* 必須要絕對定位 */
  position: absolute;
}
</style>