Vue实现页面滚动加载分页数据
直接上代码:以下为js部分 ,请求后台数据需自己封装:export default{//定义的数据变量data(){return {list:[],page:1,//当前页limit:10}},methods:{//获取后台接口数据
·
直接上代码:
以下为js部分 ,请求后台数据需自己封装:
export default{
//定义的数据变量
data(){
return {
list:[],
page:1,//当前页
limit:10
}
},
methods:{
//获取后台接口数据
async getData(){
//请求数据
const data = {
page: this.page,
limit: this.limit,
type: "1"
}
// async:异步,await:需要等待await后面的函数运行完并且有了返回结果之后,才继续执行下面的代码
const res = await requset(`url`, data, 'get');//自己封装的请求数据的方法
this.list = res.data;
},
//滚动分页加载数据
scroll() {
let isLoading = true;//是否有数据可以加载
window.onscroll = async () => {
// 距离底部200px时加载一次
let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 200;
if (bottomOfWindow && isLoading == true) {
this.page = this.page + 1;//每次分页+1
const data = {
page: this.page,
limit: this.limit,
type: "1"
}
const res = await requset(`url`, data, 'get');//自己封装的请求数据的方法
//有数据的时候加载
if(res.data.length > 0){
this.list.push(...res.data);//追加数据 使用 ...语法
isLoading = true;
}else{
this.$notify({
title: '温馨提示:',
message: '暂无更多数据信息!',
position: 'bottom-right'
});
isLoading = false;//无数据可以加载
}
}
}
}
},
/*生命周期函数-加载完毕执行*/
mounted(){
this.getData();//初次加载
this.scroll();
}
}
更多推荐
所有评论(0)