✅作者简介：2022年博客新星 第八。热爱国学的Java后端开发者，修心和技术同步精进。
🍎个人主页：Java Fans的博客
🍊个人信条：不迁怒，不贰过。小知识，大智慧。
💞当前专栏：微信小程序学习分享
✨特色专栏：国学周更-心性养成之路
🥭本文内容：微信小程序——分页组件的创建与使用

一、创建 pagination 分页组件

在项目的根目录下创建一个名为 pagination 的文件夹，用于存放分页组件相关的文件。

1、前端页面 pagination.wxml 代码分享

在pagination文件夹中创建一个名为pagination.wxml的文件，用于编写分页组件的模板代码。可以参考以下示例代码：

<view class="pagination"><button class="prev-btn" bindtap="prevPage">上一页</button><text class="page-info">{{currentPage}}/{{totalPage}}</text><button class="next-btn" bindtap="nextPage">下一页</button>
</view>

在这个示例代码中，我们使用了小程序的<view>标签来创建一个容器，设置了一个名为pagination的class，用于设置分页组件的样式。

在容器中，我们使用了<button>标签来创建上一页和下一页按钮，并通过bindtap属性绑定了prevPage和nextPage方法。

在容器中，我们使用了<text>标签来显示当前页码和总页数，并通过双花括号{{}}的方式绑定了currentPage和totalPage变量。

2、样式 pagination.wxss 代码分享

在pagination文件夹中创建一个名为pagination.wxss的文件，用于编写分页组件的样式代码。可以参考以下示例代码：

.pagination {display: flex;justify-content: center;align-items: center;margin-top: 10px;
}.prev-btn,
.next-btn {padding: 5px 10px;background-color: #ccc;color: #fff;border-radius: 5px;margin: 0 5px;
}.page-info {font-size: 14px;
}

3、逻辑 pagination.js 代码分享

在pagination文件夹中创建一个名为pagination.js的文件，用于编写分页组件的逻辑代码。可以参考以下示例代码：

Component({properties: {total: {type: Number,value: 0},pageSize: {type: Number,value: 10},currentPage: {type: Number,value: 1}},methods: {prevPage() {if (this.data.currentPage > 1) {this.setData({currentPage: this.data.currentPage - 1});this.triggerEvent('change', { page: this.data.currentPage });}},nextPage() {if (this.data.currentPage < this.data.totalPage) {this.setData({currentPage: this.data.currentPage + 1});this.triggerEvent('change', { page: this.data.currentPage });}}},lifetimes: {attached() {this.setData({totalPage: Math.ceil(this.data.total / this.data.pageSize)});}}
});

在这个示例代码中，我们使用了小程序的Component方法来创建一个分页组件。在properties中定义了三个属性：total表示总记录数，pageSize表示每页显示的记录数，currentPage表示当前页码。

在methods中定义了两个方法：prevPage用于处理上一页按钮的点击事件，nextPage用于处理下一页按钮的点击事件。在这两个方法中，我们通过修改currentPage的值来实现页码的切换，并通过triggerEvent方法触发change事件，将当前页码传递给父组件。

在lifetimes的attached生命周期函数中，我们计算了总页数totalPage，并将其保存在组件的data中。

二、使用 pagination 分页组件

在小程序的页面中使用分页组件的步骤如下：

1、在小程序的页面中引入分页组件。 可以使用usingComponents关键字来引入组件，或者使用require方法动态引入组件。以下是两种引入方式的示例代码：
使用usingComponents关键字引入组件：

{"usingComponents": {"pagination": "/path/to/pagination"}
}

2、使用require方法动态引入组件：

const Pagination = require('/path/to/pagination');

3、在小程序的页面中使用分页组件。 可以在页面的wxml文件中使用<pagination>标签来引入分页组件，并通过属性绑定的方式传递数据和事件。以下是一个示例代码：

<view><!-- 其他页面内容 --><pagination total="{{total}}" current="{{currentPage}}" bind:change="onPageChange"></pagination>
</view>

在这个示例代码中，我们使用了<pagination>标签来引入分页组件。通过total属性传递总记录数，通过current属性传递当前页码，通过bind:change事件绑定方式绑定了onPageChange方法。

4、在小程序的页面中编写分页查询的逻辑代码。 可以在页面的js文件中编写分页查询的逻辑代码。以下是一个示例代码：

Page({data: {total: 100, // 总记录数currentPage: 1 // 当前页码},onPageChange(event) {const { page } = event.detail;// 根据页码查询数据// 更新页面数据}
});

在这个示例代码中，我们在页面的data中定义了total和currentPage两个变量，分别表示总记录数和当前页码。

在onPageChange方法中，我们通过event.detail获取到分页组件传递的数据，其中page表示当前页码。在实际开发中，你可以根据页码查询数据，并更新页面的数据。

---

  码文不易，本篇文章就介绍到这里，如果想要学习更多Java系列知识，点击关注博主，博主带你零基础学习Java知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。