List 列表

列表主内容
列表内容列表内容
列表主内容
列表内容列表内容
列表主内容
列表内容列表内容

基础文字列表

仅包含简单文字的列表。对较简单的信息进行陈列时使用。

列表内容的描述性文字
操作1 操作2 操作3

列表内容的描述性文字

操作1 操作2 操作3

多行文字列表

仅包含主要文字及描述性文字的列表。对较复杂的，包含多个字段或内容的信息进行展示时使用。

列表标题
列表内容的描述性文字
列表标题
列表内容的描述性文字
列表标题
列表内容的描述性文字

基础图文列表

包含简单图文的列表。需使用图片和文字结合展示信息。

列表标题
列表内容的描述性文字
列表标题
列表内容的描述性文字
列表标题
列表内容的描述性文字

列表标题
列表内容的描述性文字

带操作列表

包含操作的列表。需要对所在列进行操作时使用。

列表标题
列表内容列表内容
操作1 操作2 操作3

列表标题

列表内容列表内容

操作1 操作2 操作3

列表标题
列表内容列表内容

列表标题

列表内容列表内容

不同尺寸的列表

提供大、中（默认）、小三种尺寸。

列表内容的描述性文字
列表内容的描述性文字
列表内容的描述性文字

列表内容的描述性文字
列表内容的描述性文字
列表内容的描述性文字

列表内容的描述性文字
列表内容的描述性文字
列表内容的描述性文字

斑马纹的列表

当列表内容较多时，可以使用斑马纹样式，便于用户获取信息。

列表内容的描述性文字
列表内容的描述性文字
列表内容的描述性文字
列表内容的描述性文字

异步加载的列表

当数据需要通过二次请求加载展示时，可以通过asyncLoading来处理相关的逻辑。

加载更多加载中自定义加载更多加载完成

列表标题
列表内容的描述性文字
列表标题
列表内容的描述性文字
列表标题
列表内容的描述性文字

点击加载更多

带头部及尾部的列表

当列表需要展示头部或尾部信息时，可以通过header或footer来配置。

列表标题
列表内容的描述性文字
列表标题
列表内容的描述性文字
列表标题
列表内容的描述性文字

列表标题
列表内容的描述性文字
列表标题
列表内容的描述性文字
列表标题
列表内容的描述性文字

带滚动事件的列表

当列表较长时，可以配置滚动条及事件来进行滚动处理

列表内容的描述性文字
列表内容的描述性文字
列表内容的描述性文字
列表内容的描述性文字
列表内容的描述性文字
列表内容的描述性文字
列表内容的描述性文字
列表内容的描述性文字
列表内容的描述性文字
列表内容的描述性文字
列表内容的描述性文字
列表内容的描述性文字
列表内容的描述性文字
列表内容的描述性文字
列表内容的描述性文字
列表内容的描述性文字

支持虚拟滚动的列表

支持开启虚拟滚动，适用于一次性加载长列表的场景

列表标题
第1个列表内容的描述性文字
列表标题
第2个列表内容的描述性文字
列表标题
第3个列表内容的描述性文字
列表标题
第4个列表内容的描述性文字
列表标题
第5个列表内容的描述性文字
列表标题
第6个列表内容的描述性文字
列表标题
第7个列表内容的描述性文字
列表标题
第8个列表内容的描述性文字
列表标题
第9个列表内容的描述性文字
列表标题
第10个列表内容的描述性文字
列表标题
第11个列表内容的描述性文字
列表标题
第12个列表内容的描述性文字
列表标题
第13个列表内容的描述性文字
列表标题
第14个列表内容的描述性文字
列表标题
第15个列表内容的描述性文字
列表标题
第16个列表内容的描述性文字
列表标题
第17个列表内容的描述性文字
列表标题
第18个列表内容的描述性文字
列表标题
第19个列表内容的描述性文字
列表标题
第20个列表内容的描述性文字
列表标题
第21个列表内容的描述性文字
列表标题
第22个列表内容的描述性文字
列表标题
第23个列表内容的描述性文字
列表标题
第24个列表内容的描述性文字
列表标题
第25个列表内容的描述性文字
列表标题
第26个列表内容的描述性文字
列表标题
第27个列表内容的描述性文字
列表标题
第28个列表内容的描述性文字
列表标题
第29个列表内容的描述性文字
列表标题
第30个列表内容的描述性文字

List Props

名称	类型	默认值	描述	必传
asyncLoading	String / Slot / Function	-	自定义加载中。值为空不显示加载中，值为 'loading' 显示加载中状态，值为 'load-more' 显示加载更多状态。值类型为函数，则表示自定义加载状态呈现内容。TS 类型：`string \| TNode`。通用类型定义	N
footer	String / Slot / Function	-	底部。TS 类型：`string \| TNode`。通用类型定义	N
header	String / Slot / Function	-	头部。TS 类型：`string \| TNode`。通用类型定义	N
layout	String	horizontal	排列方式（待设计稿输出）。可选项：horizontal/vertical	N
scroll	Object	-	懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100`。TS 类型：`TScroll`。通用类型定义	N
size	String	medium	尺寸。可选项：small/medium/large	N
split	Boolean	false	是否展示分割线	N
stripe	Boolean	false	是否展示斑马纹	N
onLoadMore	Function		TS 类型：`(options: { e: MouseEvent }) => void` 点击加载更多时触发	N
onScroll	Function		TS 类型：`(options: { e: Event \| WheelEvent; scrollTop: number; scrollBottom: number }) => void` 列表滚动时触发，scrollTop 表示顶部滚动距离，scrollBottom 表示底部滚动距离	N

List Events

名称	参数	描述
load-more	`(options: { e: MouseEvent })`	点击加载更多时触发
scroll	`(options: { e: Event \| WheelEvent; scrollTop: number; scrollBottom: number })`	列表滚动时触发，scrollTop 表示顶部滚动距离，scrollBottom 表示底部滚动距离

ListItem Props

名称	类型	默认值	描述	必传
action	String / Slot / Function	-	操作栏。TS 类型：`string \| TNode`。通用类型定义	N
content	String / Slot / Function	-	内容。TS 类型：`string \| TNode`。通用类型定义	N
default	String / Slot / Function	-	内容，同 content。TS 类型：`string \| TNode`。通用类型定义	N

ListItemMeta Props

名称	类型	默认值	描述	必传
avatar	String / Slot / Function	-	已废弃。列表项图片。TS 类型：`string \| TNode`。通用类型定义	N
description	String / Slot / Function	-	列表项内容。TS 类型：`string \| TNode`。通用类型定义	N
image	String / Slot / Function	-	列表项图片。TS 类型：`string \| TNode`。通用类型定义	N
title	String / Slot / Function	-	列表项标题。TS 类型：`string \| TNode`。通用类型定义	N

相似组件	何时使用
列表	用一个连续的列来显示多行元素，常用于具有相同构成及内容的模块批量展示，可承载多样化的信息内容，从纯文字到复杂的图文组合。
表格	常用于展示同类结构下的多种数据，易于组织、对比和分析等，并可对数据进行搜索、筛选、排序等操作。

Web 桌面端

Vue Stable Version：undefined

Vue Next Stable Version：undefined

React Stable Version：undefined

Mobile 移动端

Vue Next Stable Version：alpha

React Alpha Version：alpha

Flutter Alpha Version：alpha

微信小程序 Stable Version：alpha

QQ 小程序 Alpha Version：alpha

List 列表

列表主内容

列表主内容

列表主内容

基础文字列表

多行文字列表

列表标题

列表标题

列表标题

基础图文列表

列表标题

列表标题

列表标题

列表标题

带操作列表

列表标题

列表标题

列表标题

列表标题

不同尺寸的列表

斑马纹的列表

异步加载的列表

列表标题

列表标题

列表标题

带头部及尾部的列表

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

带滚动事件的列表

支持虚拟滚动的列表

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

列表标题

List Props

List Events

ListItem Props

ListItemMeta Props

何时使用

组件搭配使用

列表与加载搭配使用

列表与分页搭配使用

推荐/慎用示例

列表建议只展示用户必须的信息，将其余的信息及字段隐藏。

列表适合展示多个相同结构的内容，如果字段类型过多且简短，建议使用表格。

列表的操作建议保证在 3 个及以内，尽量不超出。超出使用下拉菜单收纳，不建议放出过多操作。

相似组件