n-no-network 无网络提示
断网占位 + 重试：自动监听系统网络状态，断网时以 fixed 全屏不透明面覆盖页面（提示图形 + 提示语 + 重试按钮，App 端另有"去设置"入口），网络恢复后整体自动隐藏——零配置即用，引入即生效。适合内容型页面、H5 活动页等断网后无法继续使用的场景。
- 零配置即用：
<n-no-network />放在页面任意位置即可，断网自动出现、恢复自动消失- 文案与图形可换：
tips换提示语（留空用内置多语言文案），image换提示图片（网络地址或 base64）- 重试是标准接法：
@retry里做重新加载，网络复查结果经connected/disconnected反馈
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
如何调用
html
<n-no-network />API
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| tips | 断网提示语；留空用内置多语言文案（跟随语言设置切换） | String | "" | - |
| z-index | 覆盖层层级：默认与加载页同级（盖过弹层类组件），需要更高时传更大数值 | Number | 1100 | - |
| image | 自定义无网络图片（网络地址或 base64），非空时替代内置图形，随覆盖区域自适应缩放（全屏上限 160px 见方，等比） | String | "" | - |
| duration | 覆盖层淡入淡出时长（毫秒），0 即显即隐无过渡；断网闪断闪回时缓和整屏闪现感 | Number | 200 | - |
| absolute | 局部模式：覆盖层相对最近的定位祖先铺满（容器需 position:relative 等），断网只遮该区域、页面其余部分照常操作；false 时 fixed 全屏接管 | Boolean | false | - |
| custom-class | 挂到根节点的额外 class（类需定义在组件样式表内，如 n-no-network--dusk 类内重定义主题令牌整面转深色） | String | "" | - |
| custom-style | 根节点行内样式，如 "z-index:1500"；与 z-index 属性同传时以此为准（用户行内样式殿后生效） | String | "" | 与 css 相同 |
事件
| 事件名 | 说明 |
|---|---|
| retry | 点击重试按钮时触发（按钮随即转 loading 态防连点，复查结束恢复）；触发后组件主动复查一次网络，结果经 connected / disconnected 反馈 |
| connected | 网络恢复时触发（离线期间自动恢复，或点击重试后复查有网，恢复即整体隐藏） |
| disconnected | 网络断开时触发（在线期间自动断网，或点击重试后复查仍无网，覆盖层保持显示） |
方法
ref 直接调用（实例类型 NNoNetworkComponentPublicInstance）：
| 方法名 | 说明 |
|---|---|
| checkNetwork() | 程序化真实复查网络（页面下拉刷新、回前台复核等场景）：与重试按钮同链路，但不发 retry 事件；重试复查进行中调用无效 |
| simulateOffline(down) | 演示/调试通道：不经真实检测直接翻转显示态（预览当前配置下的覆盖层效果），走监听同路径——仅状态翻转发 connected / disconnected、同值去重；真实状态以网络检测为准 |
实现说明
- 参考并集：参考源为唯一的无网络组件（其余参考工程无同类组件），其行为面 = 自动监听显隐 + tips/zIndex/image/customStyle 四属性 + retry/connected/disconnected 三事件 + App 端打开系统设置（官方文档核实无插槽），本组件全部收录；在此之上新增显隐过渡（duration）、重试 loading 反馈与 checkNetwork / simulateOffline 实例方法（超出参考面，见对应实现说明与方法表）。
- 事件语义：参考文档仅记载 connected / disconnected 在"重试后"触发，自动监听路径是否发事件不可核实（源码加密）。本组件用统一状态机收敛三条通道：系统监听仅状态翻转时发事件（自动断网/恢复也通知使用者，避免事件语义残缺）；点击重试无条件按复查结果发（与参考文档 100% 兼容）；初始检测只落显示位不发事件（页面加载即离线直接显示，避免与用户行为无关的通知）。重复同状态通知去重。
- 监听生命周期：创建即注册、卸载即注销（非 Web 端传同一函数引用注销，Web 端移除本实例的原生事件监听）——只移除本实例的监听，多实例并存互不影响；销毁后网络变化不产生已卸载实例的回调。
- Web 端平台适配：浏览器的 Network Information API 存在时，
getNetworkType离线时会把none覆盖成effectiveType（Chrome 实测断网仍报 "4g"），onNetworkStatusChange优先挂 connection change（离线未必触发），off又是全局移除（多实例卸载互踩）——均为上游网络接口在浏览器上的实测盲区。故 Web 端改用浏览器原生online/offline事件（权威、逐实例注册/移除），查询通道（初始检测/重试复查）统一用navigator.onLine纠偏；非 Web 端走uni.on/offNetworkStatusChange。 - 默认图形：本库加密发行零静态资源，内置图形取「主题盘 + 信号图标 + 错误色斜杠」自绘（图标表无划断信号字形，斜杠表达"无网络"）；盘色与图标色走主题变量（深浅自适应），斜杠固定功能错误色。自定义图片与盘同尺寸、mode=aspectFit 等比缩放。
- 插图自适应：插图尺寸由覆盖区域实测驱动（出现时与容器/窗口变化时重测）——取「160px 设计上限、区域宽度一半、区域高度扣除文字与操作区竖向预留（约 170px）」三者的最小值；区域过小（剩余不足 40px）时插图整位让出，文字与重试按钮永远可见——局部模式任意容器下无网状态都显示完整。间距随插图等比收缩。局部区域建议高度不小于 200px（含 App 端"去设置"入口）。
- 全屏覆盖与滚动穿透：根为全屏 fixed 不透明面并阻断触摸滚动（断网期间底下页面不可滚，淡出收尾期覆盖层仍在、同样阻断）；恢复后先淡出播完再整根卸载——在线态零节点、不拦截触摸、无样式残留。内容路径（内置图形 ↔ 自定义图片）与定位方式（fixed ↔ absolute）切换走根节点重建键，规避动态插拔不重绘的平台问题。
- 局部模式（absolute，与 n-overlay 局部遮罩同构，超出参考面）：覆盖层改相对最近的定位祖先铺满，断网只遮该区域、页面其余部分照常滚动与点击（区域内触摸仍阻断，不穿透到底下内容）；使用方容器需 position:relative 等定位。网络监听仍是全局的（网络状态本就是全局信号），只是占位渲染在区域内；插图随区域自适应（见上条），保证小区域显示完整。
- 显隐过渡：断网出现与恢复隐藏带 opacity 淡入淡出（
duration可调，默认 200ms，0 即显即隐），机制与弹层族同构——离线挂载后等 50ms 首帧渲染再上目标透明度（过渡才会播放），恢复先淡出、播完（duration + 40ms 收尾缓冲）再卸载；connected/disconnected在状态翻转即发，不等动画收尾。过渡期间反向翻转（淡出中又断网）自动清零旧定时器重新入场，不残留半途状态。 - 重试反馈：点击重试后按钮转 loading 态（加载圈 + 文案保持，n-button loading 自带点击拦截）直至复查返回——复查期间连点无效；复查失败（接口异常，罕见）同样复位按钮不卡死，且不妄发翻转事件（网络状态无法判定）。
- 层级：默认 1100 与加载页同级（盖过弹层类的 1000）；
z-index属性与custom-style="z-index:…"均可调，两者同传时 custom-style 优先（用户行内样式殿后生效，全库行内拼接通例）。 - 设置入口：参考仅在 App 端提供打开系统设置的能力，本组件对齐——"去设置"入口仅在 App 端编译（调
uni.openAppAuthorizeSetting，Android/iOS 4.51+、鸿蒙 4.61+），Web 与小程序端不渲染不绑定，不产生跨端告警；低版本系统不支持时 toast 回执（文案走多语言），不静默失败。 - 适用性限制（官方同款声明）：普通组件盖不住 video / map 等原生组件，含原生层的页面勿用本组件兜底。
- 不收项：参考的 customStyle 为 object 类型，本库统一为 string（全库定制通道一致）；参考 zIndex 的 string 类型收窄为 number（uts 类型完整，行内样式直接拼接）。