最近在用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; } },