微信小程序网络请求实现分页查询
// 在Page实例中定义相关数据和方法
Page({
data: {
pageNum: 1, // 当前页数
pageSize: 10, // 每页数量
dataList: [], // 存储数据的数组
isEnd: false, // 是否到达最后一页
},
onLoad: function () {
// 初始化页面,加载第一页数据
this.loadData();
},
loadData: function () {
// 进行分页查询请求
wx.request({
url: 'https://your-api-url.com/query',
method: 'GET',
data: {
page: this.data.pageNum,
size: this.data.pageSize,
},
success: (res) => {
const newData = res.data;
if (newData.length > 0) {
// 如果返回结果不为空,则追加到已有数据中
const dataList = this.data.dataList.concat(newData);
this.setData({
dataList: dataList,
pageNum: this.data.pageNum + 1,
});
} else {
// 如果返回结果为空,表示已到达最后一页
this.setData({ isEnd: true });
}
},
fail: (err) => {
console.error(err);
},
});
},
loadMore: function () {
// 加载更多数据,触发下一页查询
if (!this.data.isEnd) {
this.loadData();
}
},
onReachBottom: function () {
// 监听用户滚动到底部事件,自动触发加载更多数据
this.loadMore();
},
onPullDownRefresh: function () {
// 下拉刷新页面,重新加载第一页数据
this.setData({
dataList: [],
pageNum: 1,
isEnd: false,
});
this.loadData();
wx.stopPullDownRefresh();
},
});
以上代码中,通过dataList数组存储查询到的数据,pageNum表示当前页数,pageSize表示每页数量,isEnd标志是否到达最后一页。在onLoad钩子函数中初始化页面时加载第一页数据,在loadData函数中发送分页查询请求,并将返回结果追加到dataList中。loadMore函数用于触发加载更多数据,onReachBottom监听用户滚动到底部事件并自动触发加载更多数据。onPullDownRefresh用于下拉刷新页面,重新加载第一页数据。
请注意替换示例代码中的实际接口URL和请求参数,确保与你的项目相匹配。