Vue实现下拉滚动加载刷新功能
mounted() {
const _this = this;
window.addEventListener('scroll', function () {
//变量scrollTop是滚动条滚动时,距离顶部的距离
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//变量windowHeight是可视区的高度
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
//变量scrollHeight是滚动条的总高度
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
//滚动条到底部的条件 console.log(scrollTop,windowHeight,scrollHeight);
if (scrollTop + windowHeight+1 >= scrollHeight) {
//到了这个就可以进行业务逻辑加载后台数据了
// _this.footerText = '我是有底线的';
// _this.pagination.pageIndex = _this.pagination.pageIndex + 1
// _this.GetOwnCoursePageListPush() 数果数组是请求的,则执行请求
//达到条件停止自动加载
_this.txtList = [..._this.txtList, ..._this.addList]
if (_this.txtList.length >= 60) {
_this.addList = []
}
}
})
}
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
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
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13