【微信小程序】网络请求实现分页查询，下拉触发加载更多

微信小程序网络请求实现分页查询

// 在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和请求参数，确保与你的项目相匹配。