H5+app沉淀式状态栏

最新推荐文章于 2022-09-04 22:35:15 发布

zzang..

最新推荐文章于 2022-09-04 22:35:15 发布

阅读量471

点赞数

分类专栏： H5+app

本文链接：https://blog.csdn.net/xxxx_l/article/details/118420461

版权

H5+app 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客探讨了在App.vue中如何设置沉浸式状态栏，并解决由此导致的所有页面受影响的问题。通过判断和特定页面的处理，实现了在特定页面不设置状态栏样式，同时在页面销毁时恢复设置。内容涉及plus.webview.currentWebview().setStyle方法、plus.navigator.getStatusbarHeight()的使用以及如何在页面生命周期钩子中进行适配。

摘要由CSDN通过智能技术生成

使用沉淀式状态栏会使状态栏消失，页面布局会往上

在App.vue上设置

plus.webview.currentWebview().setStyle({top:plus.navigator.getStatusbarHeight() + 'px',background:'#010206'}); //设置一个状态栏高度和背景颜色 plus.navigator.getStatusbarHeight() 为获取当前手机的状态栏高度 
plus.navigator.setStatusBarStyle('light'); //设置状态栏的颜色

这样设置会导致所有页面都会有

如果在某个特定的页面不需设置可以使用

mounted() {
      if(plus.navigator.isImmersedStatusbar()){  //判断是否支持沉淀式状态栏
        if(plus.navigator.getStatusbarHeight() > 0){ //这里判断一下状态栏是否为0
          plus.webview.currentWebview().setStyle({top:'0px !important'});
        }
      }
}

//别忘了撤离当前页面的时候恢复设置的状态栏
destroyed() {
      plus.navigator.setStatusBarStyle('light');
      plus.webview.currentWebview().setStyle({top:plus.navigator.getStatusbarHeight() + 'px',background:'#010206'});
},

zzang..

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
H5+app沉淀式状态栏

沉淀式状态栏的使用//先设置为状态栏的高度为0plus.webview.currentWebview().setStyle({top:'0px'});if(plus.navigator.isImmersedStatusbar()){ //判断是否支持沉淀式状态栏 if(plus.navigator.getStatusbarHeight() > 0){ //这里判断一下状态栏是否为0 plus.webview.currentWebview().set
复制链接

扫一扫

专栏目录