ListView 列表

最近更新时间:2025-12-30 17:25:52

我的收藏

组件功能

列表视图容器组件(ListView) 用于承载并展示多个列表项(ListViewItem),是构建纵向信息列表的基础容器。
该组件负责统一管理列表结构、展示数量及整体状态信息,具体的内容与交互由内部的列表项组件定义。

基础用法

通过 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. 字符串: 直接显示状态文本,适用于简单提示。
JSON 格式:
"status": "共 10 条记录"
效果展示如下:



2. 对象:通过包含 text 字段的对象配置状态内容。
JSON 格式:
"status": {
"text": "共 10 条记录"
}
效果展示如下:



注意:
虽然类型定义中包含 iconfavicon 字段,但当前实现仅显示文本内容,不支持图标显示。

ListViewItem 子组件

ListView 必须包含一个或多个 ListViewItem 作为子组件,用于定义每一行的具体内容和交互行为。详细配置请参见 ListViewItem 列表项

使用示例

以下示例展示了一个带展示数量限制和状态提示的列表视图。
JSON 格式:
{
"type": "ListView",
"limit": 5,
"status": "显示前 5 条记录",
"children": [
{
"type": "ListViewItem",
"gap": "12px",
"align": "center",
"onClickAction": { "type": "select_item", "payload": { "id": "1" } },
"children": [
{ "type": "Icon", "name": "document", "color": "#0052D9" },
{ "type": "Text", "value": "文档 1" }
]
},
{
"type": "ListViewItem",
"gap": "12px",
"align": "center",
"children": [
{ "type": "Icon", "name": "document", "color": "#0052D9" },
{ "type": "Text", "value": "文档 2" }
]
}
]
}
效果展示如下: