vue如何实现纯前端表格滚动分页加载(vue,开发技术)

实现效果

实现过程

<divid="container"ref="container"@mousewheel="handleScroll":><!--表格--><divclass="loading-bottom"v-show="visibleLoading"><a-spin:spinning="visibleLoading"></a-spin>正在加载数据</div></div>

data(){return{visibleLoading:false,}},mounted(){//ref指向对应div，不建议对window全局监听，会影响子div的滚动this.$refs.container.addEventListener('scroll',this.handleScroll);},beforeUnmount(){this.$refs.container.removeEventListener('scroll',this.handleScroll);},methods:{//滚轮监听handleScroll(){letlistAllHeight=document.documentElement.scrollTop||document.body.scrollTop+document.documentElement.scrollHeight||document.body.scrollHeight;letcontainerHeight=document.querySelector('#container').scrollHeight;//46+62+75是表格距离页面顶部的剩余距离，跟个人布局有关letfieldHeight=document.querySelector('#left-field').scrollHeight+46+62+75;if((fieldHeight>=containerHeight&&this.pageHeight!==fieldHeight)||(containerHeight>fieldHeight&&this.pageHeight!==containerHeight)){this.visibleLoading=true;}setTimeout(()=>{if(listAllHeight===this.pageHeight&&this.pageHeight<containerHeight){this.pageHeight=this.pageHeight+750;}if(this.pageHeight>containerHeight&&containerHeight>fieldHeight){this.pageHeight=containerHeight;}if(this.pageHeight>fieldHeight&&fieldHeight>=containerHeight){this.pageHeight=fieldHeight;}this.visibleLoading=false;},500);},}

.loading-bottom{position:absolute;left:255px;bottom:0;height:30px;padding:5px0;background-color:#d3dae6;width:calc(100%-270px);text-align:center;font-size:14px;font-weight:500;border-radius:2px;}