免費AI編程助手
WeX5 開發(fā)賬目列表
賬目列表功能以列表的形式列出賬目信息，顯示出每筆賬目的分類、金額、備注和日期。用一個W文件實現(xiàn)。
1、新建應用
開發(fā)App的完整過程參考1.3.2 開發(fā)過程一節(jié)。首先新建一個應用acc。
2、新建頁面文件list.w
在“新建W向導”中選擇模板 “移動→標準→標準頁面”，文件名輸入list。在頁面中將放入數(shù)據(jù)組件和展現(xiàn)組件，如圖1-26.
圖1-26 賬目列表頁面構成
3、增加賬目數(shù)據(jù)
在賬目列表頁面中，要顯示出賬目表中的數(shù)據(jù)，就需要使用數(shù)據(jù)組件baasData，通過調用后端服務，獲取賬目表中的數(shù)據(jù)，用于賬目列表的顯示。表1-7列出了數(shù)據(jù)組件屬性的設置方法。
表1-7 賬目列表頁數(shù)據(jù)組件屬性說明
組件 | 父組件 | 屬性 | 屬性值 | 說明 |
baasData | model | xid | accountData | 賬目數(shù)據(jù) |
tableName | account | 單擊右側按鈕彈出選擇 | ||
idColumn | fID | 選擇后自動帶出 | ||
url | /justep/account | 選擇后自動帶出 | ||
queryAction | queryAccount | 選擇后自動帶出 | ||
saveAction | saveAccount | 選擇后自動帶出 | ||
autoLoad | true | 自動加載數(shù)據(jù) | ||
autoNew | false | 不自動新增數(shù)據(jù) | ||
limit | 5 | 刷新一次加載5條數(shù)據(jù) | ||
directDelete | true | 直接刪除數(shù)據(jù)表中的記錄 |
4、制作賬目列表
在賬目列表頁面中，一條條賬目使用列表的形式展現(xiàn)出來。使用列表組件list實現(xiàn)列表展現(xiàn)，配合滾動視圖組件scrollview實現(xiàn)上滑加載更多，下拉重新加載數(shù)據(jù)的功能。在list組件中使用output組件顯示賬目信息。整體界面設計如圖1-27.所示。參照圖1-28.所示的嵌套層次擺放展現(xiàn)組件。
圖1-27 賬目列表頁設計界面
圖1-28 展現(xiàn)組件嵌套層次關系
參照表1-8設置各展現(xiàn)組件的屬性。
表1-8 賬目列表頁展現(xiàn)組件屬性說明
組件 | 父組件 | 屬性事件 | 值 | 說明 |
scrollView | content1 | xid | scrollView1 | 滾動視圖 |
list | scrollView1下第2個div | xid | list1 | 賬目列表 |
data | accountData | 關聯(lián)賬目數(shù)據(jù) | ||
row | list下的li | xid | row1 | 行組件，分為兩列 |
col | row1 | xid | col1 | 用來放賬目信息的列 |
內有兩行，每行各有兩列，形成田字格，在最里面的列中放output顯示賬目信息 | ||||
col | row1 | xid | col2 | 用來放刪除按鈕的列 |
class | x-col x-col-fixed | 設置固定列寬 | ||
width | 50px; | 設置 | ||
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中的設置不同。同樣是綁定data組件的列，但是寫法不同，在HelloWorld App中是這樣的：$model.data1.ref("name")，在賬目列表中是這樣的ref('fClass')，原因是賬目列表中的output組件是放在list組件中的。$model.data1.ref("name")表示取data組件當前行的name列，ref('fClass')表示取list組件當前行的fClass列。
更多建議：