更新记录

1.2.6(2023-05-09)

修复ios网络正常后无法隐藏的问题

1.2.5(2023-03-28)

优化组件

1.2.4(2023-03-28)

优化组件流程

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.6.16 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

luanqing-network-statusbar 网络状态栏

自动监听网络状态变化

当无网络/网络中断时会自动显示,有网络时会自动隐藏,用于提高用户体验度,开发者测试时可以手动将手机设置为飞行模式测试。

默认配置简单到只需页码加一行代码即可

参数说明

名称 说明 默认值
message 显示的内容 '网络异常,请检查您的网络设置'
messageColor 内容的文字颜色 '#999999'
messageFontSize 内容的字号大小,单位rpx 28
backgroundColor 网络状态栏的背景色 '#ffecee'
fixed 是否固定,可搭配fixedTop和fixedPaddingTop使用 false
fixedTop 固定模式下距离顶部的距离,单位px 0
fixedPaddingTop 固定模式下距离顶部内边距,单位px 0
showArrowIcon 是否显示右边的箭头指示 false
showSettingButton 是否显示右边的按钮 false
settingButtonText 设置按钮的文字 '去设置'
clickSettingButtonAutoGotoSetttingPage 点击设置按钮是否自动前往设置页面(仅App支持) true
icon 最左边的小图标,不可用网络图标地址,因为无网络时才显示组件,而加载图片需有网络 默认显示网络中断小图标
listenerNetWorkStatus 是否监听网络状态,true则会在组件初次以及网络变更时发出通知,uni.$emit('networkStatus',{isConnected:false, networkType:'5G'}); false

示例代码

        <!-- 简单模式 默认配置 -->
        <luanqing-network-statusbar></luanqing-network-statusbar>

        <!-- 自定义全部配置 -->
        <luanqing-network-statusbar 
            style="margin-top: 20rpx;"
            :fixed="false" 
            :clickSettingButtonAutoGotoSetttingPage="false"
            :messageFontSize="30"
            :fixedTop="0"
            :fixedPaddingTop="0"
            icon=""
            :showArrowIcon="false"
            :showSettingButton="true"
            backgroundColor="#ffecee" 
            message="抱歉, 您的网络已中断"
            messageColor="#666666"
            :listenerNetWorkStatus="true"
            >
        </luanqing-network-statusbar>

        <!-- 自定义全部配置 -->
        <luanqing-network-statusbar 
            style="margin-top: 20rpx;"
            :fixed="false" 
            :clickSettingButtonAutoGotoSetttingPage="false"
            :messageFontSize="36"
            :fixedTop="0"
            :fixedPaddingTop="0"
            icon=""
            :showArrowIcon="true"
            :showSettingButton="false"
            backgroundColor="#D9DADE" 
            message="抱歉, 您的网络已中断"
            messageColor="#E00300"
            :listenerNetWorkStatus="false"
            >
        </luanqing-network-statusbar>
// 监听组件的返回的网络状态 (listenerNetWorkStatus属性须设置为true,默认false不通知忘网络状态)
onShow() {
    uni.$on('networkStatus',(res)=>{
        console.error("网络状态数据:",res);
    });
},

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问