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.clientHeight
        this.start = 0
        this.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>

参考链接：
https://cn.vuejs.org/guide/best-practices/performance.html
https://segmentfault.com/a/1190000041068198?utm_source=sf-similar-article