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

height: 20px;
}

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


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


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


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


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


![](https://img-blog.csdnimg.cn/direct/0efdfe62856e4684b6539424ea6e7202.png)


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


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

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

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

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


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

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

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

{{ item }}

接下来我们就可以给`view-container`添加滚动事件来动态改变要展示的数据，具体思路就是：


1. 根据滚动的高度除以每一条数据的高度得到起始索引
2. 起始索引加上容器可以展示的条数得到结束索引
3. 根据起始结束索引截取数据


具体代码如下：

const scrollTop = ref(0); // 初始滚动距离
// 滚动事件
const handleScroll = (e: Event) => {
// 获取滚动距离
scrollTop.value = (e.target as HTMLElement).scrollTop;
// 初始索引 = 滚动距离 / 每一项的高度
const startIndex = Math.round(scrollTop.value / itemHeight.value);
// 结束索引 = 初始索引 + 容器高度 / 每一项的高度
const endIndex = startIndex + viewHeight.value / itemHeight.value;
// 根据初始索引和结束索引，截取数据
showData.value = data.slice(startIndex, endIndex);

console.log(showData.value);
};

打印一下数据看看数据有没有改变：


![](https://img-blog.csdnimg.cn/direct/e3b010a66d114cb3a576def02f4663ed.png)


可以看到数据是动态改变了，但是页面上却没有按照截取的数据来展示，这是因为什么呢？ 查看一下元素：


![](https://img-blog.csdnimg.cn/direct/8da7def93b0b43a0b8edf74399890c5a.png)


可以看到存放数据的元素 也就是 `item-container` 也跟着向上滚动了，所以我们不要让它滚动，可以通过调整它的 `translateY` 的值来实现，使其永远向下偏移**滚动条的高度**：

{{ item }}

#### 总结

三套“算法宝典”

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![28天读完349页，这份阿里面试通关手册，助我闯进字节跳动](https://img-blog.csdnimg.cn/img_convert/921d61c147522637cff31846545fe430.png)



算法刷题LeetCode中文版（为例）

人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。

最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！

由于篇幅有限，下篇的面试技术攻克篇只能够展示出部分的面试题，详细完整版以及答案解析，有需要的可以关注
------------------------------------------------------------------