1、先在data里面定义变量
allLIst 表示请求接口收到的数据;
loadNextPage 表示是否进入下一页;
2、在mounted里面监听分页滚动条
//分页监听滚动条
window.addEventListener("scroll", this.handleScroll);
3、 在methods里面写handleScroll方法
//分页——滚动条触碰到底部 handleScroll() { let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //判断 如果文档的距离减200小于 屏幕可视距离 加上 滚动条距离顶部的距离,并且 loadNextPage为true ,则page++; if (document.documentElement.scrollHeight - 200 < document.documentElement.clientHeight + scrollTop) { if (this.loadNextPage) { // console.log("下一页"); this.loadNextPage = false; this.page++; this.getArticle(); } } },
4、请求数据列表之后给变量list赋值
其中 allList 为存起来的数据数组。
//请求数据列表
getArticle() {
let obj = {
page: this.page,
size: 10
};
this.$http.post("/api/total/list", obj).then(res => {
//分页进入下一页
let data = res.data.result.data;
//判断 如果数据个数小于10,不进入下一页,否则loadNextPage设为true进入下一页
data.length < 10 ? this.loadNextPage = false : this.loadNextPage = true;
//分页连接数组
this.allList = [...this.allList, ...data];
// console.log(JSON.stringify(this.allList));
});
},