需求描述
查询列表数据较多，通过滚动分页请求数据优化页面加载数据性能。
每次页面滚动到底部出发查询请求，所有数据请求完毕，鼠标再次向下滚动时，提示：“已经到底啦”；如果请求数据量超出最大请求限制，提示：只能展示XX条记录，更多记录请导出查看。
1
2
3
4
5
6
7
| <div id = "container">
<el-table></el-table>
<div class = 'bottom-show'>
<span v-if= 'maxLimit'>只能展示XX条记录，更多记录请导出查看</span>
<span v-if= 'loadingComplete'>已经到底啦</span>
</div>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
| mounted(){
document.getElementById('container').addEventListener('scroll',this.handleScrol,true)
},
beforeDestroy(){
document.getElementById('container').removeEventListener('scroll',this.handleScrol)
},
methods:{
handleScroll(){
var eleContainer =documrnt.getElementById('container')
var scrollTop = eleContainer.scrollTop
var winHeight = eleContainer.clientHeight
var docHeight = eleContainer.scrollHeight
if(winHeight +scrollTop >= docHeight){
if(this.currentPageAccount < 100 &&this.sunAccount < 1000){
this.loadingComplete = true
this.maxLimit = false
} else if (this.currentPageAccount === 100 && this.sumAccount < 1000){
this.currentPage = this.currentPage + 1
this.loadNextPage()
}else if (this.currentPageAccount === 100 && this.sumAccount === 1000){
this.maxLimit = true
this.loadingComplete = false
}
}
},
async loadingNextPage(){
try{
const res = await queryDetail({
pageNo:this.currentPage,
pageSize:100,
code:this.code
time:this.time
})
const arr = res.results||[]
arr.map(item => {
item.id =item.code+'-'+item.codeL
})
this.currentPageAccount = arr.length||0
this.sumAccount = this.sumAccount + this.currentPageAccount
this.tableData.push(...arr)
this.$nextTick(()=>{
var secEl = document.getElementById('container')
// srcEl.scrollTop = 0 滚动条在顶部
srcEl.scrollTop = srcEl.scrollHeight * 0.9
})
this.maxLimit = false
this.loadingComplete = false
}catch(e){
this.tableData = []
this.currentPageAccount = 0
console.warn(e)
}
}，
async refreshList(){
try{//点击查询清空传参
this.currentPageAccount = 0
this.sumAccount = 0
this.tableData = []
this.currentPage = 1
const res = await queryDetail({
pageNo:1,
pageSize:100,
code:this.code,
time:this.time
})
const arr = res.results|| []
arr.map(item => {
tem.id =item.code+'-'+item.codeL
})
this.tableData = arr
this.currentPageAccount = arr.length||0
this.sumAccount = this.sumAccount + this.currentPageAccount
this.maxLimit = false
this.loadingComplete = false
}catch(e){
this.tableData = []
this.currentPageAccount = 0
console.warn(e)
}
}
}
|
1
2
3
4
5
6
7
8
9
10
| .container{//页面设置全屏，否则无法监听到滚动条的变化，通过当前容器id获取页面滚动条元素，就不会监听到其他耶main滚动条的变化了
height:100%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:auto;
padding:31px;
}
|
问题及注意点
给页面容器设置 id 或 ref ，通过 id 或 ref 获取并监听当前页面滚动条的变化，从而判断一些触底操作；
每次触底之后就发送请求，请求后的数据添加到原来数据的尾部；但是监听了容器 div 的滚动事件到底部就发请求，往 table 里加数据，但是 div 不会因为数据增加了而往上调，一直在底部、一直触发请求，知道没有数据了，因此在每次请求完数据后，设置滚动条的为孩子在顶部或者在文档内容的十分之九处；
当本次查询数据累计加载多次后，想要更换查询条件，触发查询，就要先把累计数据参数都清空，当前请求野马置为第一页；
由于当前系统框架做了封装，页面不再是全屏，才可以监听到页面滚动条的变化
由于有固定页面内表头的需求，因此更改为监听 table 表格中滚动条的方式，实现滚动翻页查询
模版更改
1
| <el-table ref="myTableRef"></el-table>
|
页面加载后监听更改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| mounted(){
this.$refs.myTableRef.bodyWrapper.addEventListener('scroll',this.handleScroll,true)
},
beforeDestroy(){
this.$refs.myTableRef.bodyWrapper.removeEventListener('scroll',this.handleScroll)
},
methods:{
handleScroll(){
const tableDom = this.$refs.myTableRef.bodyWrapper
const scrollTop = tableDom.scrollTop
const winHeight = tableDom.clientHeight
const docheight = tableDom.scrollHeight
if(winHeight +scrollTop >= docHeight){
console.log('...触底了')
}
}
}
|