使用 Vue.js 实现高效虚拟滚动

简介

在这个项目中，你将学习如何使用 Vue.js 实现一个虚拟滚动列表。虚拟滚动是一种仅渲染大型数据集可见区域的技术，而不是渲染或部分渲染不可见区域中的数据。这实现了极高的渲染性能，适用于渲染大量小体积的数据。

👀 预览

🎯 任务

在这个项目中，你将学习：

• 如何使用 axios 库异步加载和渲染数据
• 如何实现虚拟滚动功能以仅渲染可见列表项
• 如何根据当前滚动位置计算可见列表项的起始和结束索引
• 如何通过使用缓冲区在可见区域之外渲染额外的列表项来优化渲染性能

🏆 成果

完成这个项目后，你将能够：

• 实现虚拟滚动功能以提高渲染性能
• 在 Vue.js 组件中异步加载和渲染数据
• 根据当前滚动位置计算可见列表项
• 使用缓冲区防止滚动期间出现白屏

设置项目结构

在这一步中，你将了解项目结构以及登录功能中涉及的文件。

项目目录结构如下：

本题的初始代码已经提供。打开编码环境，目录结构如下：

├── js
│   ├── axios.min.js
│   ├── http-vue-loader.js
│   └── vue.min.js
├── data.json
├── index.html
└── virtual-scroll-list.vue

其中：

• js/axios.min.js 是 axios 请求库文件。
• js/vue.min.js 和 js/http-vue-loader.js 是与 Vue.js 库相关的文件。
• data.json 是要请求的数据文件。
• index.html 是主页。
• virtual-scroll-list.vue 是需要完成的组件文件。

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来，在 VM 顶部打开“Web 8080”并手动刷新，你将看到页面。初始效果是一个空的列表框。

异步数据加载与渲染

在这一步中，你将学习如何使用 axios 库异步加载和渲染数据。

1. 打开 virtual-scroll-list.vue 文件。
2. 在 mounted() 生命周期钩子函数中，使用 axios 向 data.json 文件发送请求并填充 list 数据：

mounted() {
  // TODO: 完成数据请求
  axios("./data.json").then((res) => {
    this.list = res.data;
    this.totalHeight = this.list.length * this.itemHeight; // 计算总高度
  });
}

这将从 data.json 文件中获取数据并将其存储在 list 数据属性中。totalHeight 属性也会根据 list 的长度和 itemHeight 进行计算。

完成此步骤后，应使用从 data.json 文件加载的数据渲染初始列表。

实现虚拟滚动

在这一步中，你将学习如何实现虚拟滚动功能。

1. 打开 virtual-scroll-list.vue 文件。
2. 实现 scroll 事件处理程序：

methods: {
  scroll(e) {
    this.start = Math.floor(e.currentTarget.scrollTop / this.itemHeight);
  },
}

scroll 事件处理程序根据当前滚动位置计算可见列表项的 start 索引。

完成此步骤后，应实现虚拟滚动功能，并且列表项应仅在视口中可见时才进行渲染。最终效果如下图所示。

总结

恭喜你！你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。