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

<!-- pages/user/meetings/index.wxml --> <pagination 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 }, // ... }

使用抽象节点:

<!-- components/pagination/index.wxml --> <view wx:for="{{list}}" wx:for-item="item" wx:key="index"> <selectable item="{{item}}"></selectable> </view>

指定“selectable”具体是哪个组件:

<!-- pages/user/meetings/index.wxml --> <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标记是否已经初始化页面过。

// components/pagination/index.js 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。

<!-- pages/user/meetings/index.wxml --> <pagination init-immediately="{{currentTab==type['JOIN']}}" // ... > </pagination> <pagination init-immediately="{{currentTab==type['BOOK']}}" // ... > </pagination>

组件的复用

完成了以上组件,在对其他分页的页面,可以直接复用。比如,实现一个获取全部用户列表的分页,只需要新增一个user-item的组件,像这样调用:

<pagination key="{{key}}" bind:getList="getUserList" list="{{userList}}" total="{{userTotal}}" generic:selectable="user-item" > </pagination>

具体应用可以查看我写的小demo:wxapp-pagination

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/74a9c49e553c48bbaf165ae604a352f6.html