vue 移动端加载更多分页组件_Vue移动端上拉加载更多实现请求分页数据

{{item}}

{{ loadTxt[loadKey] }}

name:'App4',

components: {

},

data() {return{

page:1,//当前页

total: 0,//总数据数量

pageSize: 10,//每页几个

loadTxt: {

more:"正在加载...",

none:"没有更多了~",

err:"加载失败~"},

loadKey:"none",

datalist: [],//数据列表

loading: false,

dataMax:0};

},

mounted() {this.getWithdrawalList();//一进入页面就调用获取数据的方法

},

methods: {

getWithdrawalList() {

console.log("进入getWithdrawalList");var _this = this;this.loadKey = "more";//把展示改为"正在加载..."

//调用获取数据的接口，这里是用封装的axios

//record({

//"pageIndex": _this.page,

//"pageSize": _this.pageSize

//}).then(res => {

//if (res.data.code == 200) {

//var info = res.data.content || null;

//if (info) {

//_this.total = info.count;

//var data = info.list || [];

//_this.datalist = _this.datalist.concat(data);

//if (_this.total == _this.datalist.length) {

//_this.loadKey = "none";

//}

//} else {

//_this.loadKey = "err";

//}

//}

//});

setTimeout(function(){for(let j=_this.dataMax, len = 10; j

_this.datalist.push(j)

}

_this.dataMax+=10;

_this.total= 32;if (_this.total < _this.datalist.length) {//这里我假设数据加载完了

_this.loadKey = "none";this.loading = true}//console.log(_this.total);

//_this.loadKey = "none";

},1000);

},

loadMore() {

console.log("进入loadMore 要在手机上才有效果");

let page= this.page;

let size= this.pageSize;

let total= this.total;

let length= this.datalist.length;

let num= page *size;if (num < total && num ===length) {

console.log("loadMore......1111");++this.page;this.getWithdrawalList();

}

},

}

}

width:100%;

background-color: #f6f6f6;

padding:0.5rem 1rem 1rem;

}

.list{

width:100%;

height:2.5rem;

border: 1px solid #ccc;

margin-bottom: 0.5rem;

display: flex;

justify-content: center;

align-items: center;

}

.l-load {

text-align: center;

font-size: 0.625rem;

color: #aaa;

margin-top: 1rem;

}