阅读(6.1k) 书签赞(0) 我要纠错

WeX5 开发账目列表

2023-04-04 14:00 更新

账目列表功能以列表的形式列出账目信息，显示出每笔账目的分类、金额、备注和日期。用一个W文件实现。

1、新建应用

开发App的完整过程参考1.3.2 开发过程一节。首先新建一个应用acc。

2、新建页面文件list.w

在“新建W向导”中选择模板 “移动→标准→标准页面”，文件名输入list。在页面中将放入数据组件和展现组件，如图1-26.

图1-26 账目列表页面构成

3、增加账目数据

在账目列表页面中，要显示出账目表中的数据，就需要使用数据组件baasData，通过调用后端服务，获取账目表中的数据，用于账目列表的显示。表1-7列出了数据组件属性的设置方法。

表1-7 账目列表页数据组件属性说明

组件	父组件	属性	属性值	说明
baasData	model	xid	accountData	账目数据
		tableName	account	单击右侧按钮弹出选择
		idColumn	fID	选择后自动带出
		url	/justep/account	选择后自动带出
		queryAction	queryAccount	选择后自动带出
		saveAction	saveAccount	选择后自动带出
		autoLoad	true	自动加载数据
		autoNew	false	不自动新增数据
		limit	5	刷新一次加载5条数据
		directDelete	true	直接删除数据表中的记录

4、制作账目列表

在账目列表页面中，一条条账目使用列表的形式展现出来。使用列表组件list实现列表展现，配合滚动视图组件scrollview实现上滑加载更多，下拉重新加载数据的功能。在list组件中使用output组件显示账目信息。整体界面设计如图1-27.所示。参照图1-28.所示的嵌套层次摆放展现组件。

图1-27 账目列表页设计界面

图1-28 展现组件嵌套层次关系

参照表1-8设置各展现组件的属性。

表1-8 账目列表页展现组件属性说明

组件	父组件	属性事件	值	说明
scrollView	content1	xid	scrollView1	滚动视图
list	scrollView1下第2个div	xid	list1	账目列表
list	scrollView1下第2个div	data	accountData	关联账目数据
row	list下的li	xid	row1	行组件，分为两列
col	row1	xid	col1	用来放账目信息的列
col	内有两行，每行各有两列，形成田字格，在最里面的列中放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
output	col1下的第二行第一列	bind-ref	ref('fDescription')	绑定备注列
output	col1下的第二行第二列	xid	output1
output	col1下的第二行第二列	bind-ref	ref('fDate')	绑定日期列

账目列表中的展现组件的绑定属性和Hello World App中的设置不同。同样是绑定data组件的列，但是写法不同，在HelloWorld App中是这样的：$model.data1.ref("name")，在账目列表中是这样的ref('fClass')，原因是账目列表中的output组件是放在list组件中的。$model.data1.ref("name")表示取data组件当前行的name列，ref('fClass')表示取list组件当前行的fClass列。

以上内容是否对您有帮助：