最近呈现了很多页面都须要滚动翻页的需要
示例图
template
<div id="order" @scroll="scrollEvent" ref="scrollWrapper"> 滚动条两头内容略...<div>// 只做示例，就用按钮简略实现性能。<el-button round icon="el-icon-top" @click="toTop('order')" v-if="showTop">顶部</el-button>script
// 表格滚动scrollEvent(e) { if (e.srcElement.scrollTop>你心愿滚动到哪个数字会呈现‘回到顶部’，例如300) { this.showTop = true; } else { this.showTop = false; } let top = e.srcElement.scrollTop; // 保留加载前的滚动条高度 // 滑到最底部 if (e.srcElement.scrollTop + e.srcElement.clientHeight >= e.srcElement.scrollHeight ) { // 非最初一页都要持续申请 if (this.page.total > (this.page.pageNum * this.page.pageSize)) { let self = this; // 除分页以外还有其余搜寻条件 self.searchData.pageNum = self.page.pageNum+1; self.searchData.pageSize = self.page.pageSize; 后端分页接口.then((res) => { if (后端正确返回下一页数据) { self.page.list.push(...res.result.list); self.page.pageNum = res.result.pageNum; self.page.total = res.result.total; // 滚动条定位 this.$nextTick(() => { this.$refs.scrollWrapper.scrollTo(0, top); }) } }); } }},// 回到顶部toTop(name) { let e = document.getElementById(name); e.scroll({top: 0, left: 0, behavior: 'smooth' }); // smooth滚动不至于太快},