空状态页面需分层控制：先判断isLoading，再判断list.length===0，最后渲染列表；u-empty仅展示，需手动控制；z-paging需禁用自动空态；503维护页须后端返回并全局拦截。

空状态页面不是“有数据就显示、没数据就换图”这么简单——关键在判断时机和状态隔离，否则必然出现“闪现空页”或“loading 和 empty 同时出现”的 bug。

为什么 v-if="list.length === 0" 会闪屏

页面一打开 list 是空数组，list.length === 0 立刻为 true，空状态直接渲染；等接口返回后才更新数据，视觉上就是“先空、后有”。这不是网络慢的问题，是状态管理缺失。

• 必须引入独立的加载态标识，比如 isLoading，初始值设为 true
• v-if 判断链要分层：优先看 isLoading → 再看 list.length === 0 → 最后才是列表渲染
• uni-app 的 onLoad 中发请求，但 data 里 list: [] 和 isLoading: true 必须同步初始化，不能只靠响应式推导

uView 的 怎么用才不踩坑

它只是个展示组件，不自动感知数据或 loading 状态，所有控制逻辑得你写。

• mode 参数填内置图标名（如 "nodata"、"search"），别拼错，大小写敏感
• 自定义图片用 icon 属性，但注意：小程序平台不支持本地路径（如 /static/empty.png），必须传网络地址或 base64
• 如果用了 text，记得加空格或换行符，否则文字可能紧贴图标；例如：text="暂无内容" 比 text="暂无内容" 更稳妥（后者实际没问题，但易被误删空格）
• QQ 小程序从某版本起移除了内置图片资源，只保留字体图标，所以 mode="car" 在 QQ 小程序里是单色简笔画，别指望和 H5 一模一样

z-paging 里配置空状态的两个关键点

它自带空状态逻辑，但默认只在“分页无更多数据且列表为空”时触发，不是你想要的“首次加载为空”场景。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

• 必须显式关闭自动空态：设置 :show-empty="false"，自己用 v-if 控制 或其它缺省结构
• empty-view-img 只在 z-paging 内部判定为空时生效，它依赖 list ref 的长度和 noMore 状态，和你业务层的 isLoading 无关
• 重载列表时（比如下拉刷新），要手动调用 paging.value.reload(true)，否则空状态不会重置

服务维护类缺省页（503）怎么接得稳

这类页面不是前端“猜”出来的，而是后端明确返回 HTTP 状态码或特定错误结构，前端必须拦截，不能靠数据长度判断。

• 全局 request 拦截中检查 res.statusCode === 503 或 res.data?.code === 503，然后跳转到维护页 H5 地址
• 维护页本身要用 webview 承载（APP / 小程序），H5 直接 window.location.href 跳转
• 维护页 URL 建议由后端返回（带 platform 参数），避免前端硬编码；只有 platform 字段可写死，因为 uni-app 无法运行时自动识别鸿蒙 vs iOS
• 用户点击“返回”，需通过 uni.navigateBack() 或 plus.webview.currentWebview().opener().close() 回退，不能只靠浏览器后退键

最常被忽略的是：空状态和 loading 状态必须互斥，且 loading 要覆盖整个数据区域，不能只盖列表、漏掉顶部筛选栏——否则用户会看到“顶部在转圈、下面已闪出空图”的割裂体验。