变脸式应用 / 分页列表框架（三）

显示多个列表

本节学习导航栏加多个列表这一常见模式。

[任务]

在示例应用时，订单列表页便按照订单状态，分成“待服务”和“已完成”两栏，分别对应一个列表。
我们将练习页面orders2也改造成支持分栏的样式。

首先，我们熟悉下后端列表查询的接口。
筋斗云后端接口支持业务查询协议，可以使用cond参数才指定查询条件：

• 取待服务订单：callSvr(“Ordr.query”, {cond: “status=’CR’”});
• 取已完成/已取消订单：callSvr(“Ordr.query”, {cond: “status=’RE’ or status=’CA’”});

我们现在使用的是在mockdata.js中定义的模拟接口，已经模拟了上面两个调用。

我们在页面中增加导航栏及列表：(page/orders2.html)

<div mui-initfn="initPageOrders2" mui-script="orders2.js">
    <div class="hd">
        ...
        <div class="mui-navbar">
            <a href="javascript:;" mui-linkto="#lst1">待服务</a>
            <a href="javascript:;" mui-linkto="#lst2">已完成</a>
        </div>
    </div>

    <div class="bd">
        <div id="lst1" class="weui_cells weui_cells_access"></div>
        <div id="lst2" class="weui_cells weui_cells_access"></div>
    </div>

    ...
</div>

框架提供导航栏组件，以CSS类”mui-navbar”标识，通过属性”mui-linkto”分别指向本页中的两个列表，点击时可自动切换。
我们把导航栏放在hd中，让整个bd作为列表容器。这是一种很方便的做法，如果把导航栏放在bd中，还要一个div作为列表容器，且要计算它的合适高度。

初始化列表做些修改，指定新的navRef, listRef，用onGetQueryParam来指定查询条件：(page/orders2.js)

    var listItf = initPageList(jpage, {
        ...
        navRef: ".mui-navbar",
        listRef: "#lst1,#lst2",
        onGetQueryParam: function (jlst, queryParam) {
            queryParam.ac = "Ordr.query";
            var id = jlst.attr("id");
            if (id == "lst1") {
                queryParam.cond = "status='CR')";
            }
            else if (id == "lst2") {
                queryParam.cond = "status='RE' OR status='CA'";
            }
        },

        ...
    });