WeX5 開(kāi)發(fā)賬目列表
賬目列表功能以列表的形式列出賬目信息，顯示出每筆賬目的分類、金額、備注和日期。用一個(gè)W文件實(shí)現(xiàn)。
1、新建應(yīng)用
開(kāi)發(fā)App的完整過(guò)程參考1.3.2 開(kāi)發(fā)過(guò)程一節(jié)。首先新建一個(gè)應(yīng)用acc。
2、新建頁(yè)面文件list.w
在“新建W向?qū)А敝羞x擇模板 “移動(dòng)→標(biāo)準(zhǔn)→標(biāo)準(zhǔn)頁(yè)面”，文件名輸入list。在頁(yè)面中將放入數(shù)據(jù)組件和展現(xiàn)組件，如圖1-26.
圖1-26 賬目列表頁(yè)面構(gòu)成
3、增加賬目數(shù)據(jù)
在賬目列表頁(yè)面中，要顯示出賬目表中的數(shù)據(jù)，就需要使用數(shù)據(jù)組件baasData，通過(guò)調(diào)用后端服務(wù)，獲取賬目表中的數(shù)據(jù)，用于賬目列表的顯示。表1-7列出了數(shù)據(jù)組件屬性的設(shè)置方法。
表1-7 賬目列表頁(yè)數(shù)據(jù)組件屬性說(shuō)明
組件 | 父組件 | 屬性 | 屬性值 | 說(shuō)明 |
baasData | model | xid | accountData | 賬目數(shù)據(jù) |
tableName | account | 單擊右側(cè)按鈕彈出選擇 | ||
idColumn | fID | 選擇后自動(dòng)帶出 | ||
url | /justep/account | 選擇后自動(dòng)帶出 | ||
queryAction | queryAccount | 選擇后自動(dòng)帶出 | ||
saveAction | saveAccount | 選擇后自動(dòng)帶出 | ||
autoLoad | true | 自動(dòng)加載數(shù)據(jù) | ||
autoNew | false | 不自動(dòng)新增數(shù)據(jù) | ||
limit | 5 | 刷新一次加載5條數(shù)據(jù) | ||
directDelete | true | 直接刪除數(shù)據(jù)表中的記錄 |
4、制作賬目列表
在賬目列表頁(yè)面中，一條條賬目使用列表的形式展現(xiàn)出來(lái)。使用列表組件list實(shí)現(xiàn)列表展現(xiàn)，配合滾動(dòng)視圖組件scrollview實(shí)現(xiàn)上滑加載更多，下拉重新加載數(shù)據(jù)的功能。在list組件中使用output組件顯示賬目信息。整體界面設(shè)計(jì)如圖1-27.所示。參照?qǐng)D1-28.所示的嵌套層次擺放展現(xiàn)組件。
圖1-27 賬目列表頁(yè)設(shè)計(jì)界面
圖1-28 展現(xiàn)組件嵌套層次關(guān)系
參照表1-8設(shè)置各展現(xiàn)組件的屬性。
表1-8 賬目列表頁(yè)展現(xiàn)組件屬性說(shuō)明
組件 | 父組件 | 屬性事件 | 值 | 說(shuō)明 |
scrollView | content1 | xid | scrollView1 | 滾動(dòng)視圖 |
list | scrollView1下第2個(gè)div | xid | list1 | 賬目列表 |
data | accountData | 關(guān)聯(lián)賬目數(shù)據(jù) | ||
row | list下的li | xid | row1 | 行組件，分為兩列 |
col | row1 | xid | col1 | 用來(lái)放賬目信息的列 |
內(nèi)有兩行，每行各有兩列，形成田字格，在最里面的列中放output顯示賬目信息 | ||||
col | row1 | xid | col2 | 用來(lái)放刪除按鈕的列 |
class | x-col x-col-fixed | 設(shè)置固定列寬 | ||
width | 50px; | 設(shè)置 | ||
output | col1下的第一行第一列 | xid | output1 |
|
bind-ref | ref('fClass') | 綁定賬目分類列 | ||
style | font-size:x-large; | 顯示大字體 | ||
bind-style | {'color': val('fType') == '收入' ? 'green' : 'brown'} | 收入顯示綠色、支出顯示紅棕色 | ||
output | col1下的第一行第二列 | xid | output1 |
|
bind-ref | ref('fMoney') | 綁定金額列 | ||
style | font-size:x-large; | 顯示大字體 | ||
bind-style | {'color': val('fType') == '收入' ? 'green' : 'brown'} | 收入顯示綠色、支出顯示紅棕色 | ||
output | col1下的第二行第一列 | xid | output1 |
|
bind-ref | ref('fDescription') | 綁定備注列 | ||
output | col1下的第二行第二列 | xid | output1 |
|
bind-ref | ref('fDate') | 綁定日期列 | ||
賬目列表中的展現(xiàn)組件的綁定屬性和Hello World App中的設(shè)置不同。同樣是綁定data組件的列，但是寫(xiě)法不同，在HelloWorld App中是這樣的：$model.data1.ref("name")，在賬目列表中是這樣的ref('fClass')，原因是賬目列表中的output組件是放在list組件中的。$model.data1.ref("name")表示取data組件當(dāng)前行的name列，ref('fClass')表示取list組件當(dāng)前行的fClass列。
更多建議：