vue에서 백엔드 데이터 가져오고 페이지 나누기
{{item.name}}
var _this;
export default {
name: 'daohang',
data () {
return {
list: [],
currentPage: 1,//
pageSize: 20,
is_extending: true
}
},
created () {
_this = this
_this.getdata()
},
mounted () {
window.addEventListener('scroll', this.menu)
},
methods: {
getdata () {
$.ajax({
type: "GET",
url: " ",//
contentType: 'application/x-www-form-urlencoded;charset=utf-8',
data: {
user_id: 666,
currentPage: 1,
pageSize: 20
},
success: function (data) {
if (data.err_code > 0) {
alert(data.err_msg)
_this.is_extending = false;
} else {
_this.list = data.data
}
console.log(data.data)
}
});
},
refgetdata () {
_this.currentPage = _this.currentPage + 1;
console.log(_this.currentPage);
$.ajax({
type: "GET",
url: " ",//
contentType: 'application/x-www-form-urlencoded;charset=utf-8',
data: {
user_id: 666,
page: _this.currentPage,
pageSize: 20
},
success: function (data) {
if (data.err_code > 0) {
alert(data.err_msg)
_this.is_extending = false;
} else {
if (_this.currentPage * _this.pageSize <= data._meta.totalCount + 20) {
_this.list = _this.list.concat(data.data);
_this.is_extending = true;
}
else {
_this.$toast(' ', { duration: 3000 });
}
}
console.log(data.data)
}
});
},
menu: function () {
// //
// var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight);
// //
// var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
// //
// var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
// // ,
// if (pageHeight - viewportHeight - scrollHeight < 10) {
// this.refgetdata();//
// }
var _this = this;
_this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
if (_this.scroll + window.innerHeight + 20 >= document.documentElement.offsetHeight) {
if (_this.is_extending) {
_this.is_extending = false;
_this.refgetdata();
}
}
}
}
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.