vue通过滚动条按需加载数据

场景：
当主页面向弹框子页面传输数据，弹框数据接收之后渲染到自己的页面，当渲染的数据比较多的时候，弹框的打开和关闭就会非常卡顿（卡顿和在哪设置弹框打开和关闭的标志位关系不大，主要还是因为数据太多，渲染比较慢的原因），这时候就需要按需加载渲染这些数据

前提知识：
scrollHeight：以固定长度的滚动条滑动时scrollHeight是不变的，只有当数据加载时，弹框的数据增加了，这时候滚动条的高度会自动变小，此时scrollHeight会变大
clientHeight： clientHeight不是滚动条的高度，是弹框的视口高度，也就是图中滚动条轨道的高度，只要弹框的固定高度不变，clientHeight就是一个固定值
scrollTop: scrollTop不是滚动条上顶点到scrollHeight零点的位置，是滚动条轨道上顶点到scrollHeight零点的位置。

解决：
利用＠scroll事件通过滚动条按需加载数据，进行渲染

具体实现：

在vue的template中：

<div style = "50vh;overflow-y:scroll;backgroung:#fff;" @scroll = "scroll($event)">
	<!--需要渲染的数据dataList-->
	<div class = "dialog-body">
		<div v-for = "(value, index)" in dataList :key="index">
		.....
		</div>
	</div>
</div>

注意添加overflow属性，overflow:auto和overflow:scroll很相似，但还是有区别的，区别如下：
设置overflow:auto时：

设置overflow:scroll时：

在vue的script中：

data(){
     
	return {
     
		renderNum:'10', // 每次滚动到接近底部默认增加的数据条数
		configFileTemp:[],// 从主页面传来的所有数据
		dataList:[],// 弹框页面展示的数据
		scrollBarPercentage:0.0,// 当前展示的数据占当前scrollHeight的百分比，超过０.９就操作dataList增加新的显示数据
		addDataThreshold:0.9,// 当前展示的数据占当前scrollHeight的90%时，添加新的数据，是一个阈值
		scrollBarBottom:''
	}
},
watch:{
     
	// configDiffVal是主页面传给弹框的数据,使用configFileTemp接收
	configDiffVal:function(newVal,oldVal){
     
		let configFileTemp = newVal
		if(this.configFileTemp){
     
			// 弹框页面展示的数据dataList，默认展示this.renderNum条
			this.dataList = this.configFileTemp.slice(0, this.renderNum)
		},
		deep:true,
		immediate:true
	}
},
methods:{
     
	scroll(event){
     
		let scrollTop = event.target.scrollTop
		let clientHeight = event.target.clientHeight
		let scrollHeight = en=vent.target.scrollHeight
		this.scrollBarPercentage = ((scrollTop + clientHeight)*1.0)/scrollHeight
		if(this.scrollBarPercentage > this.addDataThreshold){
     
			// 如果超过了阈值，则添加数据
			if(this.dataList.length >= this.configFileTemp.length){
     
			// 如果数据已经加载完毕了，则不需要添加数据，直接return
				return
			}
			let startIndex = this.dataList.length
			let endIndex = Math.min(
				startIndex + this.renderNum,
				this.configFileTemp.length
			)
			let sliceData = this.configFileTemp.slice(startIndex, endIndex)
			for(let i=0; i<sliceData.length; i++){
     
				this.dataList.push(sliceData[i])
			}
 		}
	}
}

需要注意的是renderNum的默认值应该大一点，因为当增加数据的时候，第一次增加数据必须弄出滚动条，不然触发不了scroll事件，即renderNum的默认值相对大一些，本文设置的是10，如果设置2或者3，就不会触发scoll事件