VUE 简单版虚拟列表

如果列表数据有几千几万条的话，一次渲染出来会导致页面卡顿。除了懒加载和分页加载数据还可以使用虚拟列表来解决这个问题。虚拟列表的高度是整个列表实际的高度，但是实际渲染的只是可视窗口部分的内容，通过滚动时，可视区域内部分向下偏移和更新可视区域内的数据来实现。

vue-virtual-scroller是VUE官网推荐的一个虚拟列表库，地址：
https://github.com/Akryum/vue-virtual-scroller/tree/master/packages/vue-virtual-scroller

这里实现了一个每项数据高度固定的简单的虚拟列表：

<template><!-- 最底层的可视区容器 --><div ref="list" class="infinite-list-container" @scroll="scrollEvent($event)"><!-- 中间的可滚动区域，z-index=-1，高度和真实列表相同，目的是出现相同的滚动条 --><div class="infinite-list-phantom" :style="{ height: listHeight + 'px' }"></div><!-- 最上层的可视区列表，数据和偏移距离随着滚动距离的变化而变化 --><div class="infinite-list" :style="{ transform: getTransform }"><div class="infinite-list-item" v-for="item in visibleData" :key="item.id" :style="{ height: itemSize + 'px' }">{{ item.label }}</div></div></div>
</template><script>
const list = []
for (let i = 0; i < 10000; i++) {list.push({id: i,label: `virtual-list ${i}`})
}export default {name: 'MyVirtualList',data() {return {//列表数据items: list,//列表项高度itemSize: 50,screenHeight: 0, //可视区域高度startOffset: 0, //偏移距离start: 0, //起始索引end: 0 //结束索引}},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.clientHeightthis.start = 0this.end = this.start + this.visibleCount},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)//每次滚动一个完整的item的时候，可视区域才会进行向下偏移，如果和滚动的距离保持实时一样的话，可视区视觉上就没有滚动的效果，只是数据在改变}}
}
</script><style scoped>
.infinite-list-container {height: 100%;overflow: auto;position: relative;
}.infinite-list-phantom {position: absolute;left: 0;top: 0;right: 0;z-index: -1;
}.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>