跳转到主内容
极星编程网：以代码为星，赴技术山海！
📁 网站地图

HTML中如何制作带空状态提示的列表页面

苏承栈
苏承栈
• 👁 0人浏览过
空列表应由数据驱动渲染，长度为0时只渲染语义化空提示文案，避免display切换；需区分“无数据”与“加载失败”，移动端确保热区≥44×44px且文案可读可操作。 空列表时直接显示提示文案，别用 CSS 隐藏/显示切换 空状态不是靠
display: none
控制显隐，而是由数据驱动——列表数组长度为 0 时，DOM 里就不该渲染
li
，只留提示文案。否则会多一层 DOM 判断逻辑，也容易在 SSR 或 hydrate 阶段出现闪烁或不一致。 常见错误是写两套结构：
v-if
渲染列表 +
v-else
渲染提示，但忘了加 key 或没处理过渡；React 里则有人用
map()
后接
||
渲染提示，结果空数组 map 出来是空数组，
[] || '暂无数据'
还是空数组，根本不会显示文案。 Vue：用
v-if="list.length"
包住
ul
，
else
块放提示文案，确保两者互斥且无残留节点 React：写成
{list.length === 0 ? NoData /> : list.map(...)}
，别依赖 falsy 判断（比如
list?.length
是 number，但
list ||
检查的是数组本身） 纯 HTML + JS：渲染前先判断
data.length === 0
，然后
container.innerHTML = data.length ? htmlList : htmlEmpty
，避免插入空
ul
提示文案要带语义化标签，别只用
div
空状态不是装饰，是可访问性关键路径。屏幕阅读器需要知道“这里本该有列表，但现在没有”。用
div
包文案，它默认是
role=generic
，无法传达结构意图。 正确做法是复用列表容器的语义层级：如果主列表是
ul
，空状态就用
ul
+
li
，并加
aria-live="polite"
和
aria-label
。这样当数据加载完成、列表出现时，辅助技术能感知到内容变更。 立即学习 “ 前端免费学习笔记（深入） ”； 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 不要：
暂无数据
推荐：
  • 暂无数据
如果必须用非列表结构（如卡片式空态），至少加
role="region"
和
aria-labelledby
关联标题
fetch
后列表为空，得区分“没数据”和“加载失败” 空列表不等于正常流程终点。用户看到“暂无数据”，可能以为功能坏了，其实可能是接口返回了
200
但
data: []
，也可能是网络中断、401、500 导致根本没拿到数据——这两者提示文案、操作按钮、重试逻辑都不同。 关键在请求状态管理：不能只看响应体是否为空，得结合
response.ok
、
response.status
、以及
catch
是否触发。 成功响应但 data 为空 → 显示“暂无符合筛选条件的数据”，可带重置筛选按钮 网络错误或非 2xx 状态 → 显示“加载失败”，按钮文案为“重新加载”，并绑定重试函数 避免把
try/catch
里的 error message 直接展示给用户（比如 “TypeError: Failed to fetch”），要映射为用户能理解的提示 移动端空状态需预留足够点击热区，别让文案变成“不可点的摆设” 很多空页面在手机上放个“+ 新建”按钮，但文案紧贴底部、字号小、行高窄，手指点下去经常失焦。这不是 UI 问题，是交互链路断裂：用户想操作，却找不到明确入口。 解决重点不在美化，而在行为引导。空状态区域本身应具备可点击性（哪怕只是透传到按钮），且热区尺寸符合移动最小触控标准（建议 ≥ 44×44px）。 把整个空状态容器设为
display: flex
，按钮用
margin: auto
居中，并包裹在
button
内（别用
div + click
） 文案行高设为
1.5
，字体不小于
16px
，上下留白至少
24px
如果空状态含多个操作（如“新建”“导入”“查看帮助”），用垂直排列 + 足够间距，别挤成一排 空状态最容易被忽略的，其实是加载中（loading）与空状态（empty）的边界。很多人把 skeleton 或 loading 动画和空提示混在一起，导致用户无法分辨“是还没好，还是真没了”。这两个状态必须严格分离，且 loading 结束后，立刻根据实际数据决定进入 success / empty / error 分支——中间不插任何“过渡文案”。

相关文章