最近在用uniapp写商城,遇到了需求,需要上拉加载更多数据:
首先先在data里面把需要的数据写上
data() {
return {
pageNum: 1,
hasMore: true,
dataEnd: false,
}
}
然后监听onReachBottom事件,这个是和data同级的
data() {
return {
pageNum: 1, //请求第几页,默认为第一页
hasMore: true, //判断有没有数据
}
},
onReachBottom() {
this.handleTolower();
},
最后写方法
async getLIst() {
uni.showLoading({
title: '加载中'
});
let da = await this.$myRequest({
url: 'index/goods/listGoodsByMerchantId',
data: {
pageNum: this.pageNum,
pageSize: 5,
merchantId: this.zzbb
},
})
setTimeout(function() {
uni.hideLoading();
}, 400);
if (da.data.page.dataList.length == 0) {
this.hasMore = false;
this.dataEnd = true;
uni.showLoading({
title: '已经到底了'
})
setTimeout(function() {
uni.hideLoading();
}, 400)
return;
}
this.dataList = [...this.dataList, ...da.data.page.dataList];
uni.showLoading({
title: '加载完成'
})
setTimeout(function() {
uni.hideLoading();
}, 200);
},
handleTolower() {
if (this.hasMore) {
this.pageNum = this.pageNum + 1;
this.getLIst();
} else {
this.dataEnd = true;
}
},