做了一个项目，要求将后台数据滚动加载。
滚动加载必须要求后台传的接口中由pageSize和pageIndex两个参数，来判断每次传数据的条数和数据的页码。
首先要判断滑轮是向上滚动还是向下滚动，可以在data里设一个变量scrollJudge存储旧的scrollTop，每次滚动事件时都要先判断是否小于新的scrollTop并记录下新scrollTop。若小于，则滑轮向下滚动。
判断滚动分页加载的时机：什么时候加载下一页？在滚动上去的高度scrollTop加上显示的数据的高度offsetHeight加上我们设置的预留的底部高度（假设为200）之和大于或等于已经加载出来的数据的总高度的时候，就申请加载下一页。已经加载出来的数据的总高度可以用 e.target.childNodes[0].clientHeight 求得。e.target 是滚动事件源，滚动加载函数就绑定在这层容器上，这层容器要设置高度，超出高度时显示滚动条，在它内部另设一个容器，不设高度，高度会由数据自行撑开。e.target.childNodes[0] 就代表这层不设高度的容器，可以由求得其高度。
要提前设置一个page全局变量为1，每次滚动加载后就给page加上1，当作参数传给申请后台数据的接口函数，来说明该传第几页数据出来。注意要提前设置全局变量空数组scrollList，每次接收数据后都要把接收的数据传进这个空数组。在html里用v-for遍历这个数组就可以将数据显示出来了。
每次接收数据结束后，都要判断接收过来的数据的长度，若小于pageSize,就说明数据传输结束，停止page自加，停止调用申请数据的函数。可以用一个全局变量pageBack来存储每次返回的数据长度，当它等于零时，停止滚动加载。
注：每次切换新的滚动页面都要把page，scrollList，pageBack，scrollJudge等数据回复初始值。
额外问题：一开始把el-dialog也放进v-for里了，导致每次一点出来他都加载20遍的倍数，其实el-dialog不用放进for循环里，只要控制它的el-button放进去就好了。
scrollLoading(e) {
// 滚动长度
// 判断滚动加载时机
if ( e.target.scrollTop + e.target.offsetHeight + 200 >= e.target.childNodes[0].clientHeight && e.target.scrollTop > this.scrollJudge) {
// 滚动加载
this.page++;
this.scrollJudge = e.target.scrollTop;
// 判断是不是返回最后一段数据
if (this.pageBack != 0) {
this.getNodeList(this.textTitle, this.page);
}
}
},
//调用接口传数据
getNodeList(id, page) {
let item = {};
item.parentId = id;
item.pageSize = 20;
item.pageIndex = page;
var url = this.Api + "接口地址";
http
.myGet(url, item)
.then((data) => {
if (data.status === 1) {
this.parentNodes = JSON.parse(JSON.stringify(data));
// 根据页数滚动加载
if (page == 1) {
this.scrollList = data.messageJson;
} else {
this.scrollList = this.scrollList.concat(data.messageJson);
}
// 判断是不是滚动到底部
this.pageBack = data.messageJson.length;
} else {
this.$message({
type: "error",
message: data.message,
offset: 100,
});
}
})
.catch((err) => {
this.$message({
type: "error",
message: err,
offset: 100,
});
});
},
vue滚动分页加载