跳到主要内容
Termlib

UI 组件 · 数据展示

列表

List

也叫：List View、列表视图、条目列表、清单

把多条内容纵向一条接一条排列，每条通常是标题加一两行说明，适合逐条浏览和点击进入详情。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

做一个消息通知列表，每条高 64px：左侧 40px 圆形头像，中间上行是加粗标题，下行是灰色单行摘要，超出部分省略；右侧显示相对时间，未读消息标题前有一个小圆点。条目间用浅灰细线分隔，悬停背景变浅灰，点击进入详情，底部有「加载更多」按钮。

发给

01判断

你的内容是这样吗？

对照两列，确认列表是不是你要找的。

符合这些情况，用列表

  • 每条内容只有标题加一两行说明、用户主要从上到下逐条浏览时，例如消息、通知、评论
  • 条目数量较多，需要在一屏里紧凑地看到尽量多条时
  • 每条点进去能查看详情，列表本身只需露出关键信息时
  • 在手机等窄屏页面上展示多条记录时

是这些情况，换成别的

  • 条目同质、字段多、需要逐列比较或排序时

    改用表格

  • 每条内容以封面图、商品图为主、需要视觉浏览时

    改用卡片网格卡片

  • 只有一条记录、需要展示它的全部字段时

    改用描述列表

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    每条有七八个字段却挤在一行里用空格隔开，其实应该做成表格

  2. 02

    列表项之间没有分隔线也没有间距，文字连成一片，分不清哪条是哪条

  3. 03

    把每个列表项都做成带大阴影的卡片，浪费空间，一屏只能看两三条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由纵向排列的列表项组成，每项通常包含前置图标或头像、标题、说明文字，以及右侧的附加信息或操作。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1从上到下排列的多行条目，宽度一致
  2. 2每行左侧常有图标或头像，右侧有时间或箭头
  3. 3条目之间有细分隔线或统一的间距

04解释

详细解释

列表把多条内容竖着排成一列，每条占一行或几行。常见结构是左边一个图标或头像，中间标题和一行说明，右边时间、箭头或操作按钮。消息、通知、评论、文件列表、设置项都属于这一类。

列表和表格的区别在于字段数量和用途：列表每条只露出少量关键信息，重在从上到下逐条浏览、点进去看详情；表格按列对齐多个字段，重在横向比较和批量处理。列表和卡片的区别在于密度：列表紧凑，一屏能看很多条；卡片更占空间，适合以图片为主的内容。

条目较多时，列表常配合分页、无限滚动或「加载更多」按钮使用。

开发者信息
术语 ID
component-list
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • ul:not(nav ul, header ul, footer ul, article ul, aside ul, li ul, [role], [class*="menu" i], [class*="nav" i]):has(> li + li + li):has(> li > :is(div, img, p, h3, h4, button))
  • [role="list"]
  • .list-group
  • .ant-list
  • [class*="MuiList-root"]:not([role="menu"])
  • .arco-list
  • .t-list
  • .n-list
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • list
  • list-group
  • item-list
  • data-list
  • list-view
  • listview
  • activity-list
  • list-items
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • List
  • ListView
  • DataList
  • ItemList
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 重复子项
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30