项目中遇到 tab切换列表,每个tab都需要分页的需求,分页流程具有相似性,于是想将分页封装为组件,方便应用。
组件的应用已写成一个小demo,效果如下图所示(数据用mock模拟):
源码可以查看:wxapp-pagination
项目需求
具体项目需求:
- 查看自己相关的会议(页面命名为 meetings)
- tab切换,分为:
- “我的会议”(我参加的会议,后面会以 "join" 为 key区分)
- “我的预约”(我预约的会议,后面会以 "book" 为 key区分)
- 一次加载10条(size=10),拉到底部后,加载下一页(page = page +1)
当然,作为前端,要考虑性能方面的需求:
- 首次只加载默认tab页的首页,其他tab等到点击到对应tab才开始加载。
- 回到已加载过的tab页,保留原数据不重新加载。
所以原型图大概就长这样:
逻辑实现
与分页逻辑相关的项目结构如下:
├── components
│ ├── meeting-item
│ └── pagination
├── model
│ └── user.js
└── pages
│ └── user
│ ├── meetings
│ └── ...
│
└── vant-weapp
复制代码
还是用图理一下他们之间的关系吧:
在组件内监听触发分页事件
触发分页的事件是滚动到页面的底部,小程序中,触发该事件是Page页面的onReachBottom
事件,但是这个事件只能在Page中触发,所以要将这个触发时机传递给pagination组件。
解决思路是:组件?pagination 内,设置key
属性,每当onReachBottom
事件触发之后,设置组件属性 key
? 为一个随机字符串,当组件?pagination?监听到key
的变化的时候,做出分页操作。
Component({
properties: {
key: {
type: String,observer: '_loadMoreData'
}
}
})
复制代码
<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>
复制代码
Page({
onReachBottom(){
const key = scene[+this.data.currentTab].key
this.setData({
[key]: random(16)
})
}
})
复制代码
分页组件的实现逻辑
触发到达底部之后,需要加载数据。但再加载之前,先满足加载的条件:
- 上一页还未加载完成(loading = true),不重复加载
- 当前页面全部加载完(ended = true),不继续加载
具体加载流程为:
- **page:**触发 onReachBottom 事件,修改 pagination组件
key
值
-
component:?
key
值监听到变化,触发加载事件_loadMoreData
-
component:
_loadMoreData
中判断满足条件后,触发加载列表函数 this.triggerEvent('getList')
,并传入页面参数page 和 size。
- **page:**向model层获取数据。
- **page:**获取数据后,传递给 pagination组件
list
和total
值。
-
component:
list
监听到变化,判断是否加载完成。
component
Component({
properties: {
name: String,key: {
type: String,observer: '_loadMoreData'
},size: {
type: Number,value: 10
},total: Number,
list: {
type: Array,observer: '_endState'
}
},data: {
page: 0,
loading: false,
ended: false
},methods: {
_loadMoreData(){
const { loading,ended,size } = this.data
if (loading) return
if (ended) return
const page = this.data.page + 1
this.setData({
loading: true,
page
})
this.triggerEvent('getList',{
page,size
})
},_endState(val,oldVal) {
const { total,list } = this.properties
let ended = false
if (list.length >= total) {
ended = true
}
this.setData({
loading: false,
ended
})
}
}
})
复制代码
page
<pagination
name="BOOK"
key="{{bookKey}}"
bind:getList="getBookMeetings"
list="{{bookMeetings}}"
total="{{bookTotal}}"
>
</pagination>
复制代码
循环列表item
pagination组件获取了可循环的列表,初始想法是循环slot,但是在slot中却获取不到 item 对象:
<view wx:for="{{list}}" wx:for-item="item" wx:key="index">
<slot></slot>
</view>
复制代码
解决的办法是将每个列表项封装为组件,循环抽象节点,这样对其他页面的分页具有可拓展性。
componentGenerics
?字段中声明:
// components/pagination/index.json
{
"componentGenerics": {
"selectable": true
},// ...
}
复制代码
使用抽象节点:
<view wx:for="{{list}}" wx:for-item="item" wx:key="index">
<selectable item="{{item}}"></selectable>
</view>
复制代码
指定“selectable”具体是哪个组件:
<pagination
generic:selectable="meeting-item"
// ... 其他属性
>
</pagination>
复制代码
对应 json 文件定义对应?usingComponents
?:
// pages/user/meetings/index.json
{
"usingComponents": {
"pagination":"/components/pagination/index","meeting-item":"/components/meeting-item/index"
}
}
复制代码
meeting-item 组件接收一个属性 item,这样在?meeting-item 组件中,就可以获取到循环列表的item值,并正常绘制页面。
实现切换懒加载
给pagination添加initImmediately
属性,当initImmediately
为true时,首次加载页面,并用变量?initState
标记是否已经初始化页面过。
Component({
properties: {
initImmediately: {
type: Boolean,value: true,observer: function(val){
if (val && !this.data.initState) {
this.initData()
}
}
},
},data: {
initState: false,
},lifetimes: {
attached: function () {
if (this.data.initImmediately){
this.initData()
}
},},methods: {
initData(){
console.info(`${this.data.name}:start init data`)
this._loadMoreData()
this.setData({
initState: true
})
},
_endState(val,oldVal) {
if (!this.data.initState) return
},}
})
复制代码
当currentTab为当前类型的时候,initImmediately
设置为 true。
<pagination
name="JOIN"
init-immediately="{{currentTab==type['JOIN']}}"
// ...
>
</pagination>
<pagination
name="BOOK"
init-immediately="{{currentTab==type['BOOK']}}"
// ...
>
</pagination>
复制代码
组件的复用
完成了以上组件,在对其他分页的页面,可以直接复用。比如,实现一个获取全部用户列表的分页,只需要新增一个user-item的组件,像这样调用:
<pagination
name="USER"
key="{{key}}"
bind:getList="getUserList"
list="{{userList}}"
total="{{userTotal}}"
generic:selectable="user-item"
>
</pagination>
复制代码
具体应用可以查看我写的小demo:wxapp-pagination。