小程序分页代码（亲测）

在实现小程序分页功能时，你需要结合前端和后端的代码来处理数据的获取和展示。以下是一个简化的示例，展示了如何在微信小程序中实现客户端分页和服务器端分页的基本代码结构。

客户端分页示例

在这个示例中，我们假设所有数据都已经在小程序启动时加载到客户端，然后通过计算来显示不同页的数据。

WXML (页面布局)

<view class="container">
  <button bindtap="prevPage" disabled="{{currentPage === 1}}">上一页</button>
  <text>当前页：{{currentPage}}</text>
  <button bindtap="nextPage" disabled="{{currentPage === totalPage}}">下一页</button>
  <view class="data-list">
    <block wx:for="{{pageData}}" wx:key="index">
      <text>{{item}}</text>
    </block>
  </view>
</view>

WXSS (样式)

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
.data-list {
  margin-top: 20px;
}

JS (逻辑处理)

Page({
  data: {
    allData: [], // 假设这是从服务器获取或本地存储的完整数据集
    pageData: [], // 当前页显示的数据
    currentPage: 1,
    pageSize: 10, // 每页显示的数据条数
    totalPage: 0, // 总页数
  },
  onLoad() {
    // 假设这里是从服务器或本地存储获取的数据
    this.setData({
      allData: Array.from({ length: 100 }, (_, i) => `数据${i + 1}`)
    });
    this.calculateTotalPage();
    this.loadPageData();
  },
  calculateTotalPage() {
    this.setData({
      totalPage: Math.ceil(this.data.allData.length / this.data.pageSize)
    });
  },
  loadPageData() {
    const start = (this.data.currentPage - 1) * this.data.pageSize;
    const end = start + this.data.pageSize;
    this.setData({
      pageData: this.data.allData.slice(start, end)
    });
  },
  prevPage() {
    if (this.data.currentPage > 1) {
      this.setData({
        currentPage: this.data.currentPage - 1
      });
      this.loadPageData();
    }
  },
  nextPage() {
    if (this.data.currentPage < this.data.totalPage) {
      this.setData({
        currentPage: this.data.currentPage + 1
      });
      this.loadPageData();
    }
  }
});

服务器端分页示例

在这个示例中，我们每次只从服务器获取当前页的数据。

WXML (页面布局)与客户端分页相同。

JS (逻辑处理)

Page({
  data: {
    pageData: [], // 当前页显示的数据
    currentPage: 1,
    pageSize: 10, // 每页显示的数据条数
  },
  onLoad() {
    this.loadPageData();
  },
  loadPageData() {
    wx.request({
      url: 'https://your-server.com/api/getData', // 替换为你的服务器API地址
      method: 'GET',
      data: {
        page: this.data.currentPage,
        pageSize: this.data.pageSize
      },
      success: (res) => {
        this.setData({
          pageData: res.data.items // 假设服务器返回的数据中包含items字段
        });
      },
      fail: (err) => {
        console.error('加载数据失败', err);
      }
    });
  },
  prevPage() {
    if (this.data.currentPage > 1) {
      this.setData({
        currentPage: this.data.currentPage - 1
      });
      this.loadPageData();
    }
  },
  nextPage() {
    this.setData({
      currentPage: this.data.currentPage + 1
    });
    this.loadPageData();
    // 注意：这里没有检查是否已到达最后一页，因为服务器应该返回空数据或适当的响应来指示没有更多数据。
  }
});

在服务器端分页中，你需要确保服务器能够正确处理分页参数（如`page`和`pageSize`），并返回相应范围的数据。同时，服务器还应该能够处理边界情况，比如请求超出总页数时返回空数据或适当的错误消息。

请注意，这些示例代码仅用于演示目的，并未包含完整的错误处理和优化。在实际开发中，你应该根据具体需求和环境进行适当的修改和扩展。