1.新建子組件，將數據傳遞過去(幾萬條數據的數組，一次性展示多少條，每條數據的行高).

<template><div class="vitualScroll"><sub-scroll :dataList="dataList" :rowCount="20" :rowHeight="20"></sub-scroll></div>
</template><script>
import subScroll from "./components/subScroll.vue"
export default{name: 'virtualScroll',data(){return {//凍結數組，初步優化dataList: Object.freeze(new Array(20000).fill(null).map((item, index) => ({ n: index+1 })))}},components:{subScroll}
}
</script>
<style scoped lang="less">
.vitualScroll{width: 100%;height: 100%;
}
</style>

2.子組件subScroll.vue

div.scrollBar用來使父盒子出現滾動條，div.scrollBar的高度就是數據總條數*單條數據的高度。

div.list才是v-for數據的盒子，采用絕對定位，在父元素滑動事件中更新數據，并且將div.list的位置拉回來(div.list采用絕對定位，滑動滾動會往上跑)

<template><div class="scrollView" ref="scrollView" :style="{'--rowHeight': $props.rowHeight + 'px'}" @scroll="onScroll()"><div class="scrollBar" :style="{'--scrollBarHeight': $props.dataList.length * $props.rowHeight + 'px'}"></div><div class="list" ref="list"><div class="item" v-for="(item, index) in copyDataList" :key="index">{{ item.n }}</div></div></div>
</template><script>
export default{name: 'subScroll',data(){return {start: 0}},computed:{copyDataList(){return this.$props.dataList.slice(this.start, this.$props.rowCount + this.start)}},props:{dataList: {type: Array,default(){return [{}]}},rowCount: {type: Number,default: 0},rowHeight: {type: Number,default: 0}},mounted(){},methods: {onScroll(){//全局節流函數this.$throttle(this.updataData, 50)},updataData(){let offsetTop = this.$refs.scrollView.scrollToplet offsetNum = Math.round(offsetTop / this.$props.rowHeight)this.start = offsetNumthis.$refs.list.style.transform = `translateY(${offsetTop}px)`console.log('滑動的距離', offsetTop)}}
}
</script><style lang="less" scoped>
.scrollView{width: 200px;height: 400px;overflow: auto;position: relative;.item{height: var(--rowHeight);}.scrollBar{height: var(--scrollBarHeight);}.list{position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
}
</style>