最近有很多页面需要滚动翻页。@scrolldiv模板滚动事件示例图滚动条中间的内容略...//就像一个例如,使用按钮来简单地实现功能。topscript//表格滚动scrollEvent(e){if(e.srcElement.scrollTop>您要滚动到哪个数字将显示为“返回顶部”,例如300){this.showTop=true;}else{this.showTop=false;}lettop=e.srcElement.scrollTop;//加载前保存滚动条高度//滑动到底部if(e.srcElement.scrollTop+e.srcElement.clientHeight>=e.srcElement.scrollHeight){//如果不是最后一个则继续请求page(after为了速度,最后不返回真正的total,而是返回-1)//haveNextPage的判断放在其他page上(逻辑是:当page的list长度===pagenumber*条数haveNextPage为真,否则为假)if(this.haveNextPage){//1s防抖lettimeout=null;如果(超时){清除超时(超时);}timeout=setTimeout(()=>{this.getNextPage(top);},1000)}}}},//加载下一页:滚动到底部+getNextPage后面有数据(top){//后端没有返回正常的合计值,滚动加载统一为total<0//if(this.page.total>(this.page.pageNum*this.page.pageSize)){让self=this;后端列表接口(url,self.searchData).then((res)=>{if(requestsuccessful){//添加数据+更新页码self.page.list.push(...res.result.list);self.page.pageNum=res.result.pageNum;//滚动条重新定位this.$nextTick(()=>{this.$refs.scrollWrapper.scrollTo(0,top);})}});},//回到顶部toTop(name){lete=document.getElementById(name);e.scroll({top:0,left:0,behavior:'smooth'});//平滑滚动不会太快},el-table增加自定义指令(部分)注:省略回顶函数template...scriptexportdefault{directives:{loadmore:{bind:function(el,binding){constele=el.querySelector('.el-table__body-wrapper');电。addEventListener('滚动',function(){//这是指令的内部实例lettop=this.scrollTop;//滑动到底部if(this.scrollTop+this.clientHeight>=this.scrollHeight){binding.value(top);}})}}},方法:{loadMore(top){if(this.haveNextPage){lettimeout=null;如果(超时){清除超时(超时);}timeout=setTimeout(()=>{this.getNextPage(top);},1000)}},//其他相同方法省略}}