微信小程序实现分页功能

下面是“微信小程序实现分页功能”的完整攻略。

1.前置准备

在实现分页功能之前，需要准备好以下内容：

微信小程序开发环境、开发工具（如微信开发者工具）；
分页数据的获取接口；
显示分页数据的页面。

2.分页功能实现

2.1 前端页面布局

在前端页面的布局中，需要考虑到分页的展示以及交互方式。一般来说，分页功能需要包含以下元素：

上一页按钮；
下一页按钮；
当前页码；
总页数。

这些元素可以被布局在页面的任何位置，根据具体需求进行调整。

2.2 请求数据

首先，在 onLoad 中初始化数据，并且默认请求第一页数据：

Page({
  data: {
    // 当前页码
    page: 1,
    // 总页数
    totalPages: 0,
    // 分页数据
    list: []
  },
  onLoad: function () {
    // 初始化数据
    this.getList()
  },
  getList: function () {
    let that = this
    // 请求数据接口，这里假设请求的接口为 /api/list
    wx.request({
      url: '/api/list',
      data: {
        // 请求第 this.data.page 页数据
        page: that.data.page
      },
      success: function (res) {
        let data = res.data
        that.setData({
          // 将请求到的数据进行渲染
          list: that.data.list.concat(data.list),
          totalPages: data.total_pages
        })
      }
    })
  }
})

2.3 更新页面

在请求数据之后，需要更新页面，将请求到的数据显示在页面上。需要注意的是，在更新页面之后，需要判断当前是否已经到达最后一页。如果已到达最后一页，则禁用下一页按钮。

Page({
  data: {
    // 当前页码
    page: 1,
    // 总页数
    totalPages: 0,
    // 分页数据
    list: []
  },
  onLoad: function () {
    // 初始化数据
    this.getList()
  },
  getList: function () {
    let that = this
    // 请求数据接口，这里假设请求的接口为 /api/list
    wx.request({
      url: '/api/list',
      data: {
        // 请求第 this.data.page 页数据
        page: that.data.page
      },
      success: function (res) {
        let data = res.data
        that.setData({
          // 将请求到的数据进行渲染
          list: that.data.list.concat(data.list),
          totalPages: data.total_pages
        })
        // 如果已到达最后一页，则禁用下一页按钮
        if (that.data.page >= that.data.totalPages) {
          that.setData({
            disableNext: true
          })
        }
      }
    })
  },
  // 上一页事件
  prevPage: function () {
    // 判断是否已到达第一页
    if (this.data.page > 1) {
      this.setData({
        page: this.data.page - 1,
        disablePrev: this.data.page - 1 <= 1
      })
      this.getList()
    }
  },
  // 下一页事件
  nextPage: function () {
    // 判断是否已到达最后一页
    if (this.data.page < this.data.totalPages) {
      this.setData({
        page: this.data.page + 1,
        disableNext: this.data.page + 1 >= this.data.totalPages
      })
      this.getList()
    }
  }
})

3.示例说明

示例一

在微信小程序中，显示一张照片墙，每页展示 10 张照片，分页按钮显示在照片墙的底部，可以通过滑动或点击按钮进行照片的翻页。

在 onLoad 中初始化数据，设置初始页码为 1：

Page({
  data: {
    // 当前页码
    page: 1,
    // 总页数
    totalPages: 0,
    // 分页数据
    photoList: []
  },
  onLoad: function () {
    // 初始化数据
    this.getList()
  },
  getList: function () {
    let that = this
    // 请求数据接口，这里假设请求的接口为 /api/photo
    wx.request({
      url: '/api/photo',
      data: {
        // 请求第 this.data.page 页数据，每页展示 10 张照片
        page: that.data.page,
        count: 10
      },
      success: function (res) {
        let data = res.data
        that.setData({
          // 将请求到的数据进行渲染
          photoList: that.data.photoList.concat(data.photoList),
          totalPages: data.total_pages
        })
      }
    })
  },
  // 上一页事件
  prevPage: function () {
    // 判断是否已到达第一页
    if (this.data.page > 1) {
      this.setData({
        page: this.data.page - 1
      })
      this.getList()
    }
  },
  // 下一页事件
  nextPage: function () {
    // 判断是否已到达最后一页
    if (this.data.page < this.data.totalPages) {
      this.setData({
        page: this.data.page + 1
      })
      this.getList()
    }
  }
})

在 wxml 中，展示照片墙和分页按钮：

<!-- 照片墙 -->
<view class="photo-wall">
  <block wx:for="{{photoList}}">
    <view class="photo-item">
      <image class="photo-img" src="{{item.src}}"></image>
    </view>
  </block>
</view>

<!-- 分页按钮 -->
<view class="pagination">
  <button class="prev-btn" bindtap="prevPage" disabled="{{page <= 1}}">上一页</button>
  <text class="page-label">{{page}} / {{totalPages}}</text>
  <button class="next-btn" bindtap="nextPage" disabled="{{page >= totalPages}}">下一页</button>
</view>

示例二

在微信小程序中，显示用户列表，每页展示 20 个用户，分页按钮显示在用户列表的底部，可以通过滑动或点击按钮进行用户列表的翻页。