|
|
|
|
# 利用bi.loader快速封装分页加载更多列表
|
|
|
|
|
|
|
|
|
|
长列表,从后端分页加载,搜索也由后端处理. 非常常见的需求
|
|
|
|
|
|
|
|
|
|
用过ButtonGroup的都知道格式化好items,然后直接populate就行了.
|
|
|
|
|
|
|
|
|
|
Loader也类似,只是他还具有itemsCreator的能力 [bi.loader](https://code.fineres.com/projects/VISUAL/repos/fineui/browse/src/base/combination/loader.js)
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
class MyList extends BI.Widget {
|
|
|
|
|
|
|
|
|
|
hasNext = false;
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
return {
|
|
|
|
|
type: "bi.loader",
|
|
|
|
|
itemsCreator: (op, callback) => {
|
|
|
|
|
const times = op.times; // times标记分页码
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
callback(this.formatItems(/* some datas */));
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
hasNext: () => this.hasNext
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
formatItems(items) {
|
|
|
|
|
// 一般格式化节点常用的状态
|
|
|
|
|
let keyword;
|
|
|
|
|
let selected;
|
|
|
|
|
let disabled;
|
|
|
|
|
|
|
|
|
|
return items.map(item => {
|
|
|
|
|
return {
|
|
|
|
|
...item,
|
|
|
|
|
keyword,
|
|
|
|
|
selected,
|
|
|
|
|
disabled,
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
常见操作手法
|
|
|
|
|
|
|
|
|
|
### bi.loader依旧支持items属性,如果非空,会直接渲染出来作为第一页
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### bi.loader可以直接调用空的populate方法,其会自动触发itemsCreator请求数据
|
|
|
|
|
|
|
|
|
|
利用这种机制可以将数据请求集中化. 无需在筛选条件变化之后,手动去请求来数据,然后再populate到Loader里面
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
class MyList extends BI.Widget {
|
|
|
|
|
|
|
|
|
|
watch = {
|
|
|
|
|
"keyword | filter | perPage": () => {
|
|
|
|
|
this.loader.populate();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
return {
|
|
|
|
|
type: "bi.loader",
|
|
|
|
|
ref: ref => this.loader = ref,
|
|
|
|
|
itemsCreator: (op, callback) => {
|
|
|
|
|
const times = op.times; // times标记分页码
|
|
|
|
|
requestItems(op.times, callback(/* some datas */));
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
requestItems(page, cb) {
|
|
|
|
|
// 一般常用的请求条件
|
|
|
|
|
let keyword;
|
|
|
|
|
let filter;
|
|
|
|
|
let perPage;
|
|
|
|
|
|
|
|
|
|
fetchData({
|
|
|
|
|
page,
|
|
|
|
|
keyword,
|
|
|
|
|
filter,
|
|
|
|
|
perPage,
|
|
|
|
|
}).then(cb);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### hasNext的处理怎么才能更优雅
|
|
|
|
|
|
|
|
|
|
查阅内部源码,hasNext可以利用count props,也可以由外部回调
|
|
|
|
|
|
|
|
|
|
这样就有两种操作姿势
|
|
|
|
|
|
|
|
|
|
1. 在itemsCreator回调的时候修改props`this.loader.attr("count",res.allCount)`
|
|
|
|
|
2. 在itemsCreator回调的时候保存状态,hasNext回调给loader `hasNext:() => this.hasNext`
|
|
|
|
|
|
|
|
|
|
孰优孰劣见仁见智,但有没有更符合开发直觉的方式呢? 例如 `callback({items,hasNext,count})`, coming soon
|
