文档首页> 应用魔方 AppCube> 用户指南> 低代码应用开发指导> 标准页面> 平台标准组件介绍> 列表视图
更新时间：2022-05-11 GMT+08:00
查看PDF
分享

列表视图

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

列表视图由上方列表区和下方的页码区组成。使用时，需要在“列表视图（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