更新记录
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);
});
},