NoNetwork 无网络提示

无网络提示组件。它自动监听网络状态：网络恢复时不渲染；断网时以固定定位的全屏遮罩提示用户，并提供重试入口。

适合放在页面根节点，用于订单、内容详情等网络不可用时无法继续操作的页面。

平台兼容性

H5	App	微信小程序	支付宝小程序
√	√	√	√

原生组件限制

普通的 fixed 遮罩无法覆盖 video、map 等原生组件。此类页面请由业务侧使用 cover-view 或对应平台的原生覆盖方案处理。

基础用法

<template>
    <view>
        <view class="page-content">这里是页面正式内容</view>
        <snake-no-network @retry="handleRetry" />
    </view>
</template>

<script setup lang="ts">
function handleRetry() {
    // 组件已重新检测网络；可在此刷新当前页面的数据。
}
</script>

组件在线时自动隐藏。断网时会全屏展示图片、提示语和重试按钮；点击重试后，组件会重新检测网络并触发 retry 事件。建议在事件回调中刷新当前页面的数据。

组件只负责网络状态与提示，不会自动重放失败请求；retry 中应由业务重新拉取当前页面所需数据。

自定义提示语与图片

<snake-no-network tips="网络连接已中断，请检查后重试" image="data:image/png;base64,..." @retry="reloadPageData" />

image 可传入图片 URL 或 base64；未传入时使用内置断网插图。

如何测试

1. 将组件放入需要保护的页面根节点。
2. 在真机上关闭 Wi-Fi 与移动数据，或在模拟器中切换为离线状态。
3. 返回页面查看全屏断网提示；恢复网络后提示会自动隐藏。

TIP

头条小程序不支持网络状态变化监听，因此不支持本组件。

API

Props

参数	说明	类型	默认值
tips	没有网络时的提示语	string	语言包默认值
zIndex	组件层级值	number | string	10080
image	图片提示，图片地址或 base64	string	内置提示图

Events

事件名	触发时机	参数
retry	点击重试按钮	-

Methods

方法名	说明
retry	重新检查网络并触发 retry 事件

主题变量

变量名	说明
--snake-color-surface	全屏提示背景色
--snake-color-text-muted	提示文字、按钮边框和背景
--snake-color-white	重试按钮文字颜色