别再抱怨后端一次性传给你 1w 条数据了，几行代码教会你虚拟滚动！

我们都知道，如果一次性展示所有的数据，那么会造成页面卡顿，虚拟滚动的原理就是将数据根据滚动条的位置进行动态截取，只渲染可视区域的数据，这样浏览器的性能就会大大提升，废话不多说，我们开始。

具体实现

首先，我们先模拟 500 条数据

const data = new Array(500).fill(0).map((_, i) => i); // 模拟真实数据

然后准备以下几个容器：

<template>
  <div class="view-container">
    <div class="content-container"></div>
    <div class="item-container">
      <div class="item"></div>
    </div>
  </div>
</template>

• view-container是展示数据的可视区域，即可滚动的区域
• content-container是用来撑起滚动条的区域，它的高度是实际的数据长度乘以每条数据的高度，它的作用只是用来撑起滚动条
• item-container是实际渲染数据的区域
• item则是具体渲染的数据

我们给这几个容器一点样式:

.view-container {
  height: 400px;
  width: 200px;
  border: 1px solid red;
  overflow-y: scroll;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.content-container {
  height: 1000px;
}

.item-container {
  position: absolute;
  top: 0;
  left: 0;
}

.item {
  height: 20px;
}

view-container固定定位并居中，overflow-y设置为scroll；

content-container先给它一个1000px的高度；

item-container绝对定位，top和left都设为 0；

每条数据item给他一个20px的高度；

先把 500 条数据都渲染上去看看效果：

这里我们把高度都写死了，元素的高度是实现虚拟滚动需要用到的变量，因此肯定不能写死，我们可以用动态绑定style来给元素加上高度：

首先定义可视高度和每一条数据的高度：

const viewHeight = ref(400); // 可视容器高度
const itemHeight = ref(20); // 每一项的高度

用动态绑定样式的方式给元素加上高度：

<div class="view-container" :style="{ height: viewHeight + 'px' }">
  <div
    class="content-container"
    :style="{
        height: itemHeight * data.length + 'px',
      }"
  ></div>
  <div class="item-container">
    <div
      class="item"
      :style="{
          height: itemHeight + 'px',
        }"
    ></div>
  </div>
</div>

content-container 使用每条数据的高度乘以数据总长度来得到实际高度。

然后我们定义一个数组来动态存放需要展示的数据，初始展示前 20 条：

const showData = ref<number[]>([]); // 显示的数据
showData.value = data.slice(0, 20); // 初始展示的数据 （前20个）

showData里的数据才是我们要在item遍历渲染的数据：

<div
  class="item"
  :style="{
          height: itemHeight + 'px',
        }"
  v-for="(item, index) in showData"
  :key="index"
>
  {{ item }}
</div>

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-hAqe5PkH-1714558406995)]