變臉式應用 / 分頁列表框架（三）

原創

天笑2001

2020-02-22 20:43

顯示多個列表

本節學習導航欄加多個列表這一常見模式。

[任務]

在示例應用時，訂單列表頁便按照訂單狀態，分成“待服務”和“已完成”兩欄，分別對應一個列表。
我們將練習頁面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'";
            }
        },

        ...
    });