小程序分页JS代码

在小程序中实现分页通常需要以下几个步骤：

1. 数据获取和存储

• 从服务器或本地数据源获取数据。

• 将获取到的数据存储在一个数组中。

定义分页参数

• 确定每页显示的数据条数，例如 pageSize。

• 记录当前页码，例如 currentPage。

计算分页数据

• 根据 currentPage 和 pageSize 计算当前页要显示的数据范围。

页面展示

• 在页面中使用列表等组件展示当前页的数据。

分页操作

• 提供上一页、下一页的按钮或链接。

• 点击上一页时，currentPage 减 1；点击下一页时，currentPage 加 1。

• 重新获取并展示对应页的数据。

以下是一个简单的示例代码，展示了如何在小程序中实现基本的分页功能：

// 页面的 js 文件
Page({
  data: {
    dataList: [],  // 存储数据的数组
    pageSize: 10,  // 每页显示的条数
    currentPage: 1  // 当前页码
  },

  onLoad: function () {
    this.getData();
  },

  getData: function () {
    // 模拟从服务器获取数据
    const totalData = [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' },
      //...更多数据
    ];

    const start = (this.data.currentPage - 1) * this.data.pageSize;
    const end = start + this.data.pageSize;

    this.setData({
      dataList: totalData.slice(start, end)
    });
  },

  onPrevPage: function () {
    if (this.data.currentPage > 1) {
      this.setData({
        currentPage: this.data.currentPage - 1
      });
      this.getData();
    }
  },

  onNextPage: function () {
    const totalPages = Math.ceil(totalData.length / this.data.pageSize);
    if (this.data.currentPage < totalPages) {
      this.setData({
        currentPage: this.data.currentPage + 1
      });
      this.getData();
    }
  }
});

在上述示例中，getData 方法用于根据当前页码获取对应的数据并更新到页面的 dataList 中。onPrevPage 和 onNextPage 方法分别处理上一页和下一页的点击操作。

请注意，这只是一个简单的示例，实际应用中可能需要根据具体的业务逻辑和数据获取方式进行调整。