更新时间:2022-05-11 GMT+08:00
分享

列表视图

列表视图是一个组合组件,可以灵活组合列表项的内容,并且根据实例化数据进行动态展示。

列表视图由上方列表区和下方的页码区组成。使用时,需要在“列表视图(List View)”上绑定数据模型,且数据类型必须为数组,如果要使用分页功能,分页组件需放在最外层“列表视图(List View Container)”内。

向页面中拖入一个列表视图,组件属性说明如表1所示,您也可以将鼠标放在组件上,单击,查看组件说明。

图1 查看组件说明
表1 列表视图属性

属性

说明

数值绑定

通过建立不同类型的视图模型,将各种数据源和组件的返回值或者属性值进行关联,实现动态数据效果,详情请参见属性值绑定

基本属性

基本属性通过数据绑定后,在运行时以数据绑定的值为准。

  • 无数据显示:无数据时,列表显示的值,默认值为“No Data”。
  • 列数:一行显示的列数。
  • 列排列方式:选择列的排列方式,如左对齐、右对齐、居中等。

移动端配置

列表视图在移动端的配置。

  • 下拉刷新:下拉是否刷新列表。
  • 默认数据条数:设置移动端列表视图默认展示数据的数量。
  • 显示加载文字:是否显示上拉加载文字。
  • 异步加载:和事件(on-load-data)配合使用,上拉加载时异步获取数据。

公共

列表视图公共设置。设置控件名称时,请确保输入的值在当前页面唯一,建议保持默认值。

样式

配置列表视图组件的样式,如布局、字体、背景、边框等。

属性值绑定

  1. 在列表视图的“属性”页签,单击“数据绑定”中的,绑定数据模型。

    模型实例化必须为数组,详情请参见绑定数据模型、增加查询条件、工具栏
    图2 绑定数据模型

  2. 向列表视图中拖入栅格容器,将栅格容器设置为6行2列,再向前5行中拖入标签组件,并设置标签属性。
  3. 属性值绑定。

    1. 选择第一行、第二列中的标签,单击右侧“属性值绑定”的“+”,新增属性值绑定。

      其中,“属性”设置为“文本内容”,再单击,添加模型字段,将模型字段绑定到当前标签上。

    1. 重复上一步,为其他行的标签组件进行属性值绑定。

  4. 在第6行拖入一个按钮,设置为“Handle”。
  5. 单击,保存页面,再单击,进行预览 ,预期效果如图3

    进行属性值绑定的标签组件,显示绑定的模型字段内容。
    图3 通过属性值绑定获取模型中的数据

分享:

    相关文档

    相关产品

close