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

概述

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

---

自定义实现分页功能

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 方法加载下一页的数据