前言:
我使用vue+elementui开发前端页面时,使用elementui自带的滑动加载数据的功能并不是那么好用,于是就有了下面的代码。
1、在页面加载的时候既要初始化页面的数据,又要初始化滑动加载的代码
mounted(){
this.init ();
window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy(){
window.removeEventListener('scroll', this.handleScroll, false);
},
methods: {
init () {
this.oneData={};
this.dataList=[];
this.pageNumber=1;
this.pageSize=10;
this.pageTotal=0;
this.getList()
},
handleScroll(){
// 变量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
// 滚动条到底部的条件
if (scrollTop + windowHeight - scrollHeight>-10) {
if (!this.lastPage) {
this.pageNumber += 1 // 页数+1
// 重新加载数剧
this.getList()
}
}
},
// 获取列表信息
getList () {
this.$http.get('/api/quarterlyreport/page?page='+this.pageNumber+'&limit='+this.pageSize).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
var list=res.data.list;
if(this.pageNumber==1){
this.oneData=list[0];
this.dataList=list.slice(1,list.length);
}else{
this.dataList.push(...list);
}
this.pageTotal=res.data.total;
this.lastPage = list.length<this.pageSize;
}).catch(() => {})
}
}
2、设置页面高度
.mod-home {
height: calc(100vh);
}