时间: 2020-11-28 00:50:16
标签:
element-ui
vue.js
一般情况是滚动触发一次,取回一部分数据,如下代码.
如果一次性把数据取回呢,如何处理 ?{{ i.noticeTitle }}
没有更多了
export default {
data() {
return {
count: 0,//起始页0
loading: false,
totalPages: "",//取后端返回内容的总页数
list: [] //后端返回的数组
};
},
computed: {
noMore() {
//当起始页数大于总页数时停止加载
return this.count >= this.totalPages - 1;
},
disabled() {
return this.loading || this.noMore;
}
},
created() {
this.getMessage();
},
methods: {
load() {
//滑到底部时进行加载
this.loading = true;
setTimeout(() => {
this.count += 1; //页数+1
this.getMessage(); //调用接口，此时页数+1，查询下一页数据
}, 2000);
},
getMessage() {
let params = {
pageNumber: this.count,
pageSize: 10 //每页查询条数
};
this.$axios
.post(
"https://接口",
params
)
.then(res => {
console.log(res);
this.list = this.list.concat(res.data.body.content); //因为每次后端返回的都是数组，所以这边把数组拼接到一起
this.totalPages = res.data.body.totalPages;
this.loading = false;
})
.catch(err => {
console.log(err);
});
}
}
};
最佳答案
拿到数据截取一下自己分页，但是这样一次性返回所有数据不太友好,
和向后台请求差不多{{ i.noticeTitle }}
没有更多了
export default {
data() {
return {
count: 1,//起始页0
loading: false,
totalPages: "",//取后端返回内容的总页数
list: [], //后端返回的数组
currentPage: [], // 当前页数据
pageSize: 10 // 每页数据条数
};
},
computed: {
noMore() {
//当起始页数大于总页数时停止加载
return this.count >= this.totalPages - 1;
},
disabled() {
return this.loading || this.noMore;
}
},
created() {
this.getMessage();
},
methods: {
load() {
//滑到底部时进行加载
this.loading = true;
setTimeout(() => {
this.count += 1; //页数+1
}, 2000);
},
getMessage() {
let params = {
pageNumber: this.count,
pageSize: '' // 假设pagesize不传值查询所有数据
};
this.$axios
.post(
"https://接口",
params
)
.then(res => {
console.log(res);
this.list = res.data.body.content // 接收所有返回数据
this.totalPages = Math.ceil(this.list / this.pageSize) // 计算出totolPage
this.currentPage = this.list.slice((this.count - 1) * this.pageSize, this.count * this.pageSize) // 第一页数据
this.loading = false;
})
.catch(err => {
console.log(err);
});
}
},
watch: {
count (val) {
const currentPage = this.list.slice((val - 1) * this.pageSize, val * this.pageSize)
this.currentPage = [...this.currentPage, ...currentPage]
}
}
};
799
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
