//滚动条滚动 handleScroll(event) { let bottomScroll = document.getElementById("bottomDiv"); let topScroll = document.getElementById("topDiv"); if (bottomScroll.scrollTop > this.scrollTop) { //记录上一次向下滚动的位置 this.scrollTop = bottomScroll.scrollTop; //向下滚动 this.handleScrollBottom(); } else if (bottomScroll.scrollTop < this.scrollTop) { //记录上一次向上滚动的位置 this.scrollTop = bottomScroll.scrollTop; //向上滚动 this.handleScrollTop(); } else { //左右滚动 this.handleScrollLeft(topScroll, bottomScroll); } }
首先我们通过 scrollTop 这个变量在每次进入滚动事件的时候记录垂直滚动条的位置，如果这个值 不变 那么这次滚动就是 左右滚动， 如果这个值 变大 看那么就是 向下滚动 ，如果这个值 变小 了那么就是 向上滚动 。左右滚动的时候我们需要做的事情就是让表头随着内容一起移动，这样就可以达到左右移动表头动上下移动表头固定的效果。
//滚动条左右滚动 handleScrollLeft(topScroll, bottomScroll) { //顶部表头跟随底部滚动 topScroll.scrollTo(bottomScroll.scrollLeft, topScroll.pageYOffset); },
如果是向上移动我们就要做我们在思路中提高的事情了先看代码
//滚动条向上滚动 handleScrollTop() { //如果加载的数据小于默认加载的数据量 if (this.dataTotal > this.loadNum) { let computeHeight = this.dataTop; //数据需要处理的时候的高度 if ( this.scrollTop < computeHeight && this.scrollTop >= computeHeight - this.loadNum * this.tdHeight ) { this.showLoad = true; //如果滚动高度到达数据显示顶部高度 if (this.dataTotal > this.loadedNum) { //如果数据总数大于已经渲染的数据 if (this.dataTotal - this.loadedNum >= this.loadNum) { //如果数据总数减去已经渲染的数据大于等于loadNum this.dataProcessing( this.loadNum, this.loadedNum - this.loadNum, "top" ); } else { this.dataProcessing( this.dataTotal - this.loadedNum, this.dataTotal - this.loadedNum, "top" ); } } } else if ( this.scrollTop < computeHeight - this.loadNum * this.tdHeight ) { this.showLoad = true; let scrollNum = parseInt(this.scrollTop / this.tdHeight); //滚动的位置在第几条数据 if (scrollNum - this.loadNum >= 0) { this.dataProcessing(this.loadNum * 2, scrollNum, "topAll"); } else { this.dataProcessing(scrollNum + this.loadNum, scrollNum, "topAll"); } } } },
首先我们判断加载的数据是否小于默认加载的数据量，如果时那么就不需要做任何逻辑了，因为已经加载了所有的数据了。
判断滚动高度是不是已经超过了当前screen部分数据的顶部位置并且小于当前screen部分数据的顶部位置减去默认加载数据量的高度，也就是我们之前提到第一种情况，那么大于当前screen部分数据的顶部位置减去默认加载数据量的高度就是第二种情况了。
如果进入2个判断this.showLoad设置为true，将遮罩层打开，避免表格变白影响用户的体验，提示在加载。
第一种情况如果数据顶部小于默认加载数据，我们只加载剩余高度的数据如果大于则加载默认加载的this.loadNum数量的数据
第二种情况也是一样判断只不过判断this.loadNum*2是否大于数据顶部的数据条数，只加载剩余高度的数据或者加载this.loadNum*2数量的数据。
向下滚动其实是一样的思路我们看一下代码
//滚动条向下滚动 handleScrollBottom() { let computeHeight = this.dataTop + this.loadedNum * this.tdHeight - (this.tableHeight - this.tdHeight - 3); //数据需要处理的时候的高度 if ( this.scrollTop > computeHeight && this.scrollTop <= computeHeight + this.tdHeight * this.loadNum ) { this.showLoad = true; //如果滚动高度到达数据显示底部高度 if (this.dataTotal > this.loadedNum) { //如果数据总数大于已经渲染的数据 if (this.dataTotal - this.loadedNum >= this.loadNum) { //如果数据总数减去已经渲染的数据大于等于20 this.dataProcessing( this.loadedNum - this.loadNum, this.loadNum, "bottom" ); } else { this.dataProcessing( this.dataTotal - this.loadedNum, this.dataTotal - this.loadedNum, "bottom" ); } } } else if ( this.scrollTop > computeHeight + this.tdHeight * this.loadNum ) { this.showLoad = true; let scrollNum = parseInt(this.scrollTop / this.tdHeight); //滚动的位置在第几条数据 if (scrollNum + this.loadNum <= this.dataTotal) { this.dataProcessing(scrollNum, this.loadNum * 2, "bottomAll"); } else { this.dataProcessing( scrollNum, this.dataTotal - scrollNum + this.loadNum, "bottomAll" ); } } },
计算了好了有4种情况，并且计算出了对应需要删除和新增的数据量。我们来看看dataProcessing这个函数做了什么事情。