状态栏遮挡页面的处理

本地打包时，遇到那么一个问题，状态栏会浮现于页面之前，出现遮挡页面的情况：

📃 uniapp状态栏与导航栏 - 图1

解决方案：

在App.vue中设置：

  1. onLaunch: function() {
  2.     // #ifdef APP-PLUS
  3.     // 全屏显示
  4.     plus.navigator.setFullscreen(true);
  5.     // #endif
  6. }

效果如下：

📃 uniapp状态栏与导航栏 - 图2

还需要在 manifest.json 中配置：

  1. {
  2.     "app-plus" : {
  3.         "statusbar": {
  4.             "immersed": false
  5.         },
  6.     }
  7. }

这一段配置是用于解决带有状态栏的页面顶部留有间隔的问题。

自定义导航栏

先看看自定义导航栏的效果：

📃 uniapp状态栏与导航栏 - 图3

实现方式：在pages.json中，对需要自定义导航栏的页面进行配置：

  1. {
  2.   "pages": [
  3.     {
  4.       "path": "test/test",
  5.       "style": {
  6.         "navigationBarTitleText": "测试",
  7.         "navigationStyle": "default",
  8.         "app-plus": {
  9.             "titleNView": {
  10.                 "backgroundColor": "#ff0000",
  11.                 "titleText": "测试app-plus",
  12.                 "titleColor": "#ffffff",
  13.                 "titleSize": "18px",
  14.                 "buttons": [{
  15.                         "text": "\ue60b",
  16.                         "fontSrc": "/static/fonts/iconfont/iconfont.ttf",
  17.                         "fontSize": "22px",
  18.                         "float": "left"
  19.                     },
  20.                     {
  21.                         "text": "\ue60b",
  22.                         "fontSrc": "/static/fonts/iconfont/iconfont.ttf",
  23.                         "fontSize": "22px"
  24.                     }
  25.                 ]
  26.             }
  27.         }
  28.       }
  29.     }
  30.   ]
  31. }

全局导航栏：如果想要每个页面都拥有自定义导航栏，在pages.json中的globalStyle节点配置即可：

  1. {
  2.   "globalStyle": {
  3.     "navigationStyle": "custom",
  4.     "navigationBarTextStyle": "black",
  5.     "navigationBarTitleText": "app",
  6.     "navigationBarBackgroundColor": "#F8F8F8",
  7.     "backgroundColor": "#F8F8F8",
  8.     "app-plus": {
  9.         "titleNView": {
  10.             "backgroundColor": "#ff0000",
  11.             "titleColor": "#ffffff",
  12.             "titleSize": "18px"
  13.         }
  14.     }
  15.   }
  16. }

配置参数详解：

  1. {
  2.     "titleNView": {
  3.         "backgroundColor": "#RRGGBB, 标题栏背景颜色",
  4.         "titleText": "标题栏标题文字内容",
  5.         "titleColor": "#RRGGBB, 标题栏标题文字颜色",
  6.         "titleSize": "17px，标题字体大小，默认大小为17px",
  7.         "autoBackButton": "true|false，是否显示标题栏上返回键",
  8.         "backButton": "JSON对象，标题栏上返回键样式",
  9.         "buttons": [{
  10.             "color": "按钮上的文字颜色",
  11.             "colorPressed": "按钮按下状态的文字颜色",
  12.             "float": "按钮在标题栏上的显示位置",
  13.             "fontWeight": "按钮上文字的粗细",
  14.             "fontSize": "按钮上文字的大小",
  15.             "fontSrc": "按钮上文字使用的字体文件路径",
  16.             "text": "按钮上显示的文字"
  17.         }],
  18.         "splitLine": "JSON对象，标题栏底部分割线样式"
  19.     },
  20. }

如果需要监听导航栏按键事件，在对应页面添加以下代码：

  1.     onNavigationBarButtonTap:function(e){
  2.         console.log(e.index)
  3.     },

通过 e.index 区别不同的按钮，下标从0开始

参考资料