微信小程序分页加载功能

在微信小程序中，实现分页加载功能通常涉及到以下几个步骤：

定义分页参数：在请求数据时，通常需要设置当前页码和每页的数据量。

请求数据：根据当前的分页参数发起请求。

更新数据：将请求返回的数据追加到已有的数据中。

处理分页状态：如是否还有更多数据等。

下面是一个简单的示例，演示如何在微信小程序中实现分页加载功能。

1.封装请求模块

// utils/request.js
function request(options) {
  const defaultOptions = {
    url: '', // 必填项，接口地址
    method: 'GET', // 默认 GET 方法
    data: {}, // 请求参数
    header: {
      'Content-Type': 'application/json',
    },
    timeout: 10000, // 请求超时时间，单位毫秒
    success: () => {},
    fail: () => {},
    complete: () => {}
  };

  const finalOptions = { ...defaultOptions, ...options };

  return new Promise((resolve, reject) => {
    wx.request({
      url: finalOptions.url,
      method: finalOptions.method,
      data: finalOptions.data,
      header: finalOptions.header,
      timeout: finalOptions.timeout,
      success: (res) => {
        if (res.statusCode >= 200 && res.statusCode < 300) {
          finalOptions.success(res.data);
          resolve(res.data);
        } else {
          finalOptions.fail(res);
          reject(res);
        }
      },
      fail: (err) => {
        finalOptions.fail(err);
        reject(err);
      },
      complete: () => {
        finalOptions.complete();
      }
    });
  });
}

module.exports = { request };

2. 实现分页加载功能

// pages/index/index.js
const { request } = require('../../utils/request');

Page({
  data: {
    items: [], // 存放加载的数据
    page: 1, // 当前页码
    pageSize: 10, // 每页数据量
    hasMore: true, // 是否还有更多数据
    loading: false // 请求数据中状态
  },

  onLoad: function () {
    this.loadData(); // 初次加载数据
  },

  // 加载数据
  loadData: function () {
    if (this.data.loading || !this.data.hasMore) return; // 避免重复请求或无更多数据

    this.setData({ loading: true }); // 设置加载中状态

    request({
      url: 'https://example.com/api/items',
      method: 'GET',
      data: {
        page: this.data.page,
        pageSize: this.data.pageSize
      },
      success: (data) => {
        if (data.items.length > 0) {
          this.setData({
            items: [...this.data.items, ...data.items], // 追加新数据
            page: this.data.page + 1 // 更新页码
          });
        } else {
          this.setData({
            hasMore: false // 没有更多数据
          });
        }
      },
      fail: (error) => {
        console.error('数据加载失败', error);
      },
      complete: () => {
        this.setData({ loading: false }); // 重置加载状态
      }
    });
  },

  // 下拉刷新
  onPullDownRefresh: function () {
    this.setData({
      items: [], // 清空数据
      page: 1, // 重置页码
      hasMore: true // 重置是否有更多数据标志
    }, () => {
      this.loadData(); // 重新加载数据
      wx.stopPullDownRefresh(); // 停止下拉刷新动画
    });
  },

  // 上拉加载更多
  onReachBottom: function () {
    this.loadData(); // 加载更多数据
  }
});

3. 接口返回数据示例

确保你的接口返回的数据格式符合分页加载的需求，例如：

{
  "items": [
    { "id": 1, "name": "Item 1" },
    { "id": 2, "name": "Item 2" }
    // ...
  ],
  "total": 100 // 数据总量（可选）
}