FineUI-100-Questions/questions/39.利用bi.loader快速封装分页加载更多列表.md

利用bi.loader快速封装分页加载更多列表

长列表,从后端分页加载,搜索也由后端处理. 非常常见的需求

用过ButtonGroup的都知道格式化好items,然后直接populate就行了.

Loader也类似,只是他还具有itemsCreator的能力 bi.loader

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里面

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回调的时候修改propsthis.loader.attr("count",res.allCount)
2. 在itemsCreator回调的时候保存状态,hasNext回调给loader hasNext:() => this.hasNext

孰优孰劣见仁见智,但有没有更符合开发直觉的方式呢? 例如 callback({items,hasNext,count}), coming soon