微信小程序 - 自定义实现分页功能

概述

• 在微信小程序项目中，没有现成的分页器组件，所以需要自定义实现分页功能

---

自定义实现分页功能

1、index.json

{"usingComponents": {"van-button": "@vant/weapp/button/index"}
}

• 这里使用 Vant Weapp 中的 van-button 组件，所以需要额外引入 Vant Weapp（当然，也可以使用微信小程序按钮组件）

• Vant Weapp 官网地址：https://vant-ui.github.io/vant-weapp/#/quickstart

1. 安装 Vant Weapp：npm i @vant/weapp -S --production

2. 修改 app.json：将 app.json 中的 "style": "v2" 去除

3. 点击 【工具】 -> 点击 【构建 npm】

2、index.wxml

<view class="pagination"><van-button type="primary" size="small" bind:click="handlePrevPage" disabled="{{pageNum === 1}}">上一页</van-button><text class="page-info">{{pageNum}} / {{pageTotal}}</text><van-button type="primary" size="small" bind:click="handleNextPage" disabled="{{pageNum === pageTotal}}">下一页</van-button>
</view>

• 分页器由一个容器（view）、两个按钮（van-button）、一个页码信息（text）组成

（1）上一页按钮

1. bind:click="handlePrevPage" 点击时触发 handlePrevPage 方法

2. disabled="{{pageNum === 1}}" 当当前页码（pageNum）为 1 时，上一页按钮禁用

（2）下一页按钮

1. bind:click="handleNextPage" 点击时触发 handleNextPage 方法

2. disabled="{{pageNum === pageTotal}}" 当当前页码（pageNum）等于总页数（pageTotal）时，下一页按钮禁用

（3）页码信息

• {{pageNum}} / {{pageTotal}} 显示当前页码与总页数

3、index.wxss

.pagination {margin-top: 20px;display: flex;justify-content: center;align-items: center;
}.page-info {margin: 0 20px;font-size: 14px;color: #333;
}

4、index.ts

Page({data: {pageNum: 1,pageSize: 5,pageTotal: 1,total: 0,records: [],},getRecords() {...},handlePrevPage() {if (this.data.pageNum === 1) {wx.showToast({title: "已经是第一页了",icon: "none",});return;}this.setData({ pageNum: this.data.pageNum - 1 });this.getRecords();},handleNextPage() {if (this.data.pageNum === this.data.pageTotal) {wx.showToast({title: "已经是最后一页了",icon: "none",});return;}this.setData({ pageNum: this.data.pageNum + 1 });this.getRecords();},
});

（1）数据字段

数据字段	说明
pageNum	当前页码
pageSize	每页显示的条数
pageTotal	总页数
total	总条数
records	当前页的数据列表

（2）getRecords 方法

1. 占位方法，实际逻辑需要根据业务需求实现

2. 需要通过接口请求数据，并根据 pageNum 和 pageSize 参数获取对应页的数据

（3）handlePrevPage 方法

1. 首先检查当前页码是否为 1，如果是，则提示用户“已经是第一页了”

2. 如果当前页码大于 1，则将 pageNum 减 1，并调用 getRecords 方法加载上一页的数据

（4）handleNextPage 方法

1. 首先检查当前页码是否等于总页数，如果是，则提示用户“已经是最后一页了”

2. 如果当前页码小于总页数，则将 pageNum 加 1，并调用 getRecords 方法加载下一页的数据