小程序分页JS示例代码

微信   2025-01-05 13:51   62   0  

在小程序中实现分页功能,通常需要以下几个步骤:

数据获取与存储:首先,从服务器或本地获取数据,并将其存储在一个数组或对象中。

计算分页参数:确定每页显示的条数(例如每页 10 条),以及当前页码。

展示当前页数据:根据当前页码和每页条数,从数据中截取对应的数据进行展示。

页码切换处理:当用户点击上一页、下一页或特定页码时,更新当前页码,并重新获取对应页的数据进行展示。

以下是一个简单的示例代码(使用微信小程序框架):

javascript

Page({
  data: {
    pageSize: 10,  // 每页条数
    currentPage: 1,  // 当前页码
    dataList: [],  // 数据列表
  },
  onLoad: function () {
    this.getData();
  },
  getData: function () {
    // 模拟从服务器获取数据
    let totalData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
    let start = (this.data.currentPage - 1) * this.data.pageSize;
    let end = start + this.data.pageSize;
    let currentData = totalData.slice(start, end);
    this.setData({
      dataList: currentData
    });
  },
  // 上一页
  prevPage: function () {
    if (this.data.currentPage > 1) {
      this.setData({
        currentPage: this.data.currentPage - 1
      });
      this.getData();
    }
  },
  // 下一页
  nextPage: function () {
    if (this.data.dataList.length === this.data.pageSize) {
      this.setData({
        currentPage: this.data.currentPage + 1
      });
      this.getData();
    }
  }
})

这只是一个简单的示例,实际开发中可能需要与后端进行数据交互、处理加载状态等。您还可以根据具体需求进行优化和完善。


博客评论
还没有人评论,赶紧抢个沙发~
发表评论
说明:请文明发言,共建和谐网络,您的个人信息不会被公开显示。