更新记录
1.2.6(2023-05-09)
修复ios网络正常后无法隐藏的问题
1.2.5(2023-03-28)
优化组件
1.2.4(2023-03-28)
优化组件流程
查看更多
平台兼容性
HbuilderX/cli最低兼容版本 |
3.6.16 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
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);
});
},