一、基础用法
通过 children 属性配置多个 ListViewItem,即可快速构建标准列表视图。
Template 示例:
<ListView> <ListViewItem gap="16px" align="center"> <Icon name="profile" size="lg" /> <Text value="用户资料" /> <Button label="查看" size="sm" /> </ListViewItem></ListView>
效果展示如下:
二、属性说明
| 属性名 | 类型 | 描述 | 默认值 |
| children ★ | ListViewItem[] | 列表项数组 | – |
| limit | number | "auto" | 显示数量限制 | – |
| status | WidgetStatus | 状态配置 | – |
注意:★ 标记为必填属性。
三、WidgetStatus 类型说明
status 用于在列表区域展示辅助状态信息,当前支持以下两种配置形式:
1. 字符串: 直接显示状态文本,适用于简单提示。
Template 示例:
<ListView status="共 10 条记录"> <ListViewItem gap="16px" align="center"> <Icon name="profile" size="lg" /> <Text value="用户资料" /> <Button label="查看" size="sm" /> </ListViewItem></ListView>
效果展示如下:
2. 对象:通过包含 text 字段的对象配置状态内容。
Template 示例:
<ListView status={{ text: "共 10 条记录" }}> <ListViewItem gap="16px" align="center"> <Icon name="profile" size="lg" /> <Text value="用户资料" /> <Button label="查看" size="sm" /> </ListViewItem></ListView>
效果展示如下:
注意:虽然类型定义中包含 icon 和 favicon 字段,但当前实现仅显示文本内容,不支持图标显示。
四、ListViewItem 子组件
ListView 必须包含一个或多个 ListViewItem 作为子组件,用于定义每一行的具体内容和交互行为。详细配置请参见 ListViewItem 列表项。
五、使用示例
以下示例展示了一个带展示数量限制和状态提示的列表视图。
Template 示例:
<ListView limit={5} status="显示前 5 条记录"> <ListViewItem gap="12px" align="center" onClickAction={{ type: "select_item", payload: { id: "1" } }} > <Icon name="document" color="#0052D9" /> <Text value="文档 1" /> </ListViewItem> <ListViewItem gap="12px" align="center"> <Icon name="document" color="#0052D9" /> <Text value="文档 2" /> </ListViewItem></ListView>
效果展示如下: