小程序分页实践之编写可复用分页组件

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

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

源码可以查看：wxapp-pagination

项目需求

具体项目需求：

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

所以原型图大概就长这样：

逻辑实现

与分页逻辑相关的项目结构如下：

├── components│    ├── meeting-item   # 列表item│    └── pagination      # 分页组件├── model│  └── user.js          # 我的相关 model└── pages│    └── user            # 我的相关页面│    ├── meetings    # 我的会议（就是tab要分页的页面啦）│    └── ...│└── vant-weapp

还是用图理一下他们之间的关系吧：

在组件内监听触发分页事件

触发分页的事件是滚动到页面的底部，小程序中，触发该事件是Page页面的onReachBottom事件，但是这个事件只能在Page中触发，所以要将这个触发时机传递给pagination组件。

解决思路是：组件 pagination 内，设置key属性，每当onReachBottom事件触发之后，设置组件属性 key  为一个随机字符串，当组件 pagination 监听到key的变化的时候，做出分页操作。

// components/pagination/index.jsComponent({ properties: {  key: {   type: String,   observer: '_loadMoreData' // _loadMoreData 为分页操作  } }})

<!-- pages/user/meetings/index.wxml --><tabs active="{{currentTab}}" bind:change="onChange">  <tab title="我的会议" data-key="{{type['JOIN']}}">   <view class="meeting-list">     <pagination       name="JOIN"      key="{{joinKey}}"      >     </pagination>   </view>  </tab>  <tab title="我的预约">   <view class="meeting-list">    <pagination      name="BOOK"     key="{{bookKey}}"    >    </pagination>   </view>  </tab></tabs>