学会前端虚拟滚动，看这篇就够了

一. 虚拟滚动是什么？

前端虚拟滚动是一种用于优化长列表或大量数据展示的技术。它的主要原理是只渲染用户当前可见区域的数据，而不是一次性渲染整个列表或数据集。

在传统的列表渲染中，如果数据量很大，渲染所有数据可能会导致性能下降，特别是在滚动时。虚拟滚动通过动态计算可见区域的位置和需要渲染的数据范围，只渲染可见区域内的部分数据，并在滚动时实时更新渲染的内容。

总结下就是：

接口返回了大量数据，前端将大量数据保存起来;
虚拟滚动的策略是：因为无论你返回了多大的数据量，用户可以看到的永远只是可视区域展示的数据，只是大量数据的很少一部分,所以保证可视区域的数据正常渲染就行。

二. 虚拟滚动怎么实现？

先上代码直观体验下

index.vue

<template><div class="container"><my-virtual-scroller :items="list" /></div>
</template><script>
import myVirtualScroller from './myVirtualScroller.vue'
// 模拟一个长列表
const list = []
for(let i=0; i<10000; i++) {list.push({id: i,label: `virtual-list ${i}`})
}
export default {components: {myVirtualScroller},data() {return {list: list}}
}
</script><style scoped>
.container {height: 300px;border: 1px solid #ccc;
}
</style>

myVirtualScroller.vue

// 传入数据可以实现虚拟滚动事件
// 这是一个封装好的子组件 传入数组进行渲染
<template><!-- 最底层的可视区容器 --><div ref="list" class="infinite-list-container" @scroll="scrollEvent($event)"><!-- 中间的可滚动区域，z-index=-1，高度和真实列表相同，目的是出现相同的滚动条 --><divclass="infinite-list-phantom":style="{ height: listHeight + 'px' }"></div><!-- 最上层的可视区列表，数据和偏移距离随着滚动距离的变化而变化 --><div class="infinite-list" :style="{ transform: getTransform }"><divclass="infinite-list-item"v-for="item in visibleData":key="item.id":style="{ height: itemSize + 'px' }">{{ item.label }}</div></div></div>
</template><script>
export default {name: "MyVirtualList",props: {//父组件传过来的数据items: {type: Array,default: () => [],},//可视区域每一项的高度 没有传参的话默认高度是100pxitemSize: {type: Number,//没有高度的话 高度会默认是100pxdefault: 100,},},computed: {//列表总高度listHeight() {// 计算当前传值数据的总长度 * 每个盒子的高度 计算出所有数据的整体高度return this.items.length * this.itemSize;},//可视区列表的项数visibleCount() {return Math.ceil(this.screenHeight / this.itemSize);},//可视区列表偏移距离对应的样式getTransform() {return `translate3d(0,${this.startOffset}px,0)`;},//获取可视区列表数据visibleData() {// 截取出可视区域显示的盒子 进行渲染return this.items.slice(this.start,Math.min(this.end, this.items.length));},},mounted() {// 获取可是区域的高度this.screenHeight = this.$refs.list.clientHeight;// 开始this.start = 0;// 结束this.end = this.start + this.visibleCount;},data() {return {screenHeight: 0, //可视区域高度startOffset: 0, //偏移距离start: 0, //起始索引end: 0, //结束索引};},methods: {scrollEvent() {//当前滚动条滚动位置let scrollTop = this.$refs.list.scrollTop;//此时的开始索引 使用当前滚动条高度 / 盒子高度 拿到的是当前是哪一个盒子为第一个this.start = Math.floor(scrollTop / this.itemSize);//此时的结束索引//获取到当前第一个盒子的数值 加 计算好可视区域可容纳多少盒子的值this.end = this.start + this.visibleCount;//此时的偏移距离this.startOffset = scrollTop - (scrollTop % this.itemSize);},},
};
</script><style scoped>
.infinite-list-container {height: 100%;overflow: auto;position: relative;
}.infinite-list-phantom {position: absolute;left: 0;top: 0;right: 0;
}.infinite-list {left: 0;right: 0;top: 0;position: absolute;
}.infinite-list-item {line-height: 50px;text-align: center;color: #555;border: 1px solid #ccc;box-sizing: border-box;
}
</style>