基本思路：需要两个容器，外层容器高度固定，超出后滚动。每条数据高度固定，内层容器的高度=每条数据高度数据条数，每页显示条数=外层容器高度/每条数据高度，监听外层容器的滚动事件，根据scrollTop来确定可视区域内起止数据在总数据的索引值，每条数据对应的元素设置绝对定位，top=索引值每条数据高度。为防止滑动过快产生空白，需要设置缓冲条数。
<template>
<div id="outerBox" @scroll="onScroll" :style="{height:`${outerBoxHeight}px`,width:'200px',border:`1px solid #000`,overflow:'auto'}">
<ul id="innerBox" :style="{position:'relative',height:`${liHeight*list.length}px`}">
<!-- 只展示startIndex和endIndex之间的数据 -->
<li v-for="(item,index) in list" v-if="index>=startIndex && index<=endIndex" :style="{position:'absolute',top:`${index*liHeight}px`,left:0,width:'100%',height:`${liHeight}px`,lineHeight:`${liHeight}px`}">{{item.title}}</li>
</ul>
</div>
</template>
<script>
export default{
data() {
return {
list:[],//列表
size:0,//可视区域显示条数
liHeight:30,//每条数据高度,假设是30
bufferSize:20,//缓冲条数
outerBoxHeight:300,//外层容器高度，假设是300
startIndex:0,//可视区域起始数据索引
endIndex:0, //可视区域截止数据索引
}
},
mounted() {
//假设有10000条数据
for(let i=0;i<10000;i++){
this.list.push({title:'数据-'+(i+1)})
}
// 每页显示条数=外层容器高度/每条数据高度
this.size=Math.round(this.outerBoxHeight/this.liHeight)
},
methods: {
onScroll(e){
//滚动高度
const {scrollTop}=e.target
//当前第一条数据索引值=滚动高度/每条数据高度
const currentIndex=Math.floor(scrollTop/this.liHeight)
//可视区域起始数据索引 从0和当前索引-缓冲条数中取大值
this.startIndex=Math.max(0,currentIndex-this.bufferSize)
//可视区域截止数据索引 从最大索引和当前索引+缓冲条数中取小值
this.endIndex=Math.min(this.list.length-1,currentIndex+this.bufferSize)
}
},
}
</script>
image.png
