如何编写可复用小程序分页组件实现长尾词搜索？

本文共计1738个文字，预计阅读时间需要7分钟。

项目中发现tab切换列表，每个tab都需要分页的需求，分页流程具有相似性，想将分页封装为组件，方便应用。组件的应用已编写一个小demo，效果如下所示（数据用mock模拟）：


项目中遇到 tab切换列表，每个tab都需要分页的需求，分页流程具有相似性，于是想将分页封装为组件，方便应用。

组件的应用已写成一个小demo，效果如下图所示（数据用mock模拟）：

源码可以查看：wxapp-pagination

项目需求

具体项目需求：

• 查看自己相关的会议（页面命名为 meetings）
• tab切换，分为：
  • “我的会议”（我参加的会议，后面会以 "join" 为 key区分）
  • “我的预约”（我预约的会议，后面会以 "book" 为 key区分）
• 一次加载10条（size=10），拉到底部后，加载下一页（page = page +1）

当然，作为前端，要考虑性能方面的需求：

• 首次只加载默认tab页的首页，其他tab等到点击到对应tab才开始加载。
• 回到已加载过的tab页，保留原数据不重新加载。