实现思路:
通过小程序上拉触底onReachBottom
事件触发数据第二次请求,上拉触底一次请求分页页码加一,每次请求10条数据,在请求函数中通过函数concat
来处理数据累加问题,common.WechatRequest
为封装的小程序wx.request
函数。
WXML代码:
<view hidden="{{noDataPrompt}}">
{{promptText}}
</view>
<view wx:for="{{inquiryDatas}}" wx:key="{{index}}"></view>
JS代码:
Page({
/**
* 页面的初始数据
*/
data: {
inquiryDatas: [],
noDataPrompt: true,
promptText: '无记录',
pageCurrent: 1,
pageSize: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that = this;
that.getTestData(1, 10, id, false);
},
/**
* 获取记录
*/
getTestData: function (pages, sizes, userIds, flag) {
let that = this;
let url = '接口地址';
let header = { 'Authorization': 'Bearer ' + token, 'content-type': 'application/x-www-form-urlencoded' };
let data = { 'pageNo': pages, 'pageSize': sizes, 'userId': userIds };
common.WechatRequest(url, data, header, 'POST', 'json', 'text', res => {
if (res.data.code == 200) {
let inquiryArr = res.data.data.records;
if (inquiryArr.length > 0) {
if (flag){
that.setData({
noDataPrompt: true,
pageSize: res.data.data.pages,
inquiryDatas: that.data.inquiryDatas.concat(inquiryArr)
})
} else {
that.setData({
noDataPrompt: true,
pageSize: res.data.data.pages,
inquiryDatas: inquiryArr
})
}
} else {
that.setData({
noDataPrompt: false
})
}
} else {
common.showToast('记录加载失败');
}
wx.hideLoading();
}, null, null);
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
let that = this;
let pageNo = that.data.pageCurrent + 1;
let pageSize = that.data.pageSize;
that.setData({
pageCurrent: pageNo
})
if (pageNo > pageSize) {
wx.showToast({
title: '无更多数据',
icon: 'none'
});
} else {
that.getTestData(pageNo, 10, id, true);
}
},
})