English
资源说明：项目中遇到 tab切换列表，每个tab都需要分页的需求，分页流程具有相似性，于是想将分页封装为组件，方便应用。
组件的应用已写成一个小demo，效果如下图所示（数据用mock模拟）：
源码可以查看：wxapp-pagination
项目需求
具体项目需求：
查看自己相关的会议（页面命名为 meetings）
tab切换，分为：
“我的会议”（我参加的会议，后面会以 “join” 为 key区分）
“我的预约”（我预约的会议，后面会以 “book” 为 key区分）
一次加载10条（size=10），拉到底部后，加载下一页（page = page +1）
当然，作
在本文中，我们将探讨如何在小程序开发中实现一个可复用的分页组件，以便在多个页面或场景中轻松地管理分页功能。这个实践主要针对前端开发，特别是微信小程序的开发。
项目背景是需要在一个名为"Meetings"的页面中实现分页功能，该页面有"我的会议"和"我的预约"两个Tab，每个Tab中的数据都需要分页展示。每个Tab初始加载10条数据，当用户滚动到底部时自动加载下一页。为了优化性能，首次加载只显示默认Tab（如"我的会议"）的第一页，其他Tab在用户切换时才开始加载，并且在用户返回已加载过的Tab时，不再重新加载数据。
在组件设计方面，我们有两个关键组件：`meeting-item`（用于显示列表项）和`pagination`（用于分页）。分页组件`pagination`需要监听页面滚动到底部的事件，以便在适当的时候触发数据加载。在小程序中，这个事件由Page的`onReachBottom`方法处理。为了使分页组件能感知到这个事件，我们通过改变组件的`key`属性来触发分页操作。当`key`值发生变化时，组件内部的`_loadMoreData`方法被调用，从而开始分页过程。
分页组件的逻辑实现包括以下几个步骤：
1. **事件监听**：在`pagination`组件中，我们定义一个`key`属性，并设置其`observer`为`_loadMoreData`。当`key`值改变时，`_loadMoreData`会被执行。
2. **触发加载**：在Page的`onReachBottom`事件处理函数中，我们根据当前选中的Tab更新`key`值。例如，如果当前Tab是"我的会议"，则更新`joinKey`。
3. **分页操作**：在`_loadMoreData`方法中，我们检查是否满足加载新数据的条件，如：上一页加载未完成（`loading`为真）和所有数据已加载完毕（`ended`为真）。如果满足条件，组件触发自定义事件`getList`，并将新的页码`page`和每页大小`size`作为参数传递给Page。
4. **数据请求**：Page接收到`getList`事件后，向模型层（如`user.js`）请求数据，指定当前页码和每页大小。
5. **数据反馈**：模型层获取到数据后，将数据和总条数`total`回传给Page，Page再将这些信息传递给`pagination`组件，更新`list`和`total`属性。
6. **组件状态更新**：`pagination`组件监听`list`和`total`的变化，根据`total`判断是否已经加载完所有数据，从而更新自身的状态，如显示或隐藏加载更多按钮。
这样的设计实现了分页组件的复用，使得在不同的Tab之间切换时，只需关注数据的加载和分页逻辑，而不用关心具体的分页显示细节。同时，通过合理控制加载时机和状态，提高了用户体验，避免了不必要的数据请求，优化了性能。
此外，我们还可以考虑对分页组件进行更深入的优化，例如添加错误处理、异步加载优化、加载动画等。在实际项目中，还可以考虑将分页逻辑与数据请求解耦，使用Promise或其他异步处理方式，以提高代码的可读性和可维护性。编写可复用的分页组件是前端开发中一项重要的实践，它能够有效地提升代码的复用性和项目的可维护性。
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
