uni-app导航栏

Posted 2023-03-30 YZRHANYU

uni-app导航栏

• • 1. 原生导航栏
  • • 原生导航优点
    • 原生导航缺点
    • 原生导航栏的通用配置：
    • • 全局导航栏样式设置(globalStyle)：
      • 单页面导航栏样式设置：
  • 2. 全局取消原生导航栏
  • 3. 单页面去除原生导航栏

1. 原生导航栏

原生导航优点

• 原生导航的体验更好，渲染新页面时，原生导航栏的渲染无需等待新页面dom加载，可以在新页面进入动画开始时就渲染。
• 原生导航还可以避免滚动条通顶，并方便的控制原生下拉刷新。通过pages.json的配置，可以简单的、跨端的、高性能的开发业务。

原生导航缺点

• 原生导航栏的扩展能力有限的。尤其是微信下，没有提供太多导航栏的配置。

原生导航栏的通用配置：

uni-app 自带原生导航栏，在pages.json里配置。

全局导航栏样式设置(globalStyle)：

在pages.json的globalStyle里进行各个参数配置

"globalStyle": 
    "navigationBarTextStyle": "black",//导航栏标题颜色及状态栏前景颜色
    "navigationBarTitleText": "Hello uniapp",//导航栏标题文字内容
    "navigationBarBackgroundColor": "#F8F8F8",//导航栏背景颜色
    "backgroundColor": "#F8F8F8",//页面背景色,可能不生效
    "backgroundColorTop": "#F4F5F6",
    "backgroundColorBottom": "#F4F5F6",
    "mp-alipay": 
        "titleBarColor": "#FFFFFF"
    
,

单页面导航栏样式设置：

每个page下面的style配置中的navigationBar各个参数配置，即为通用配置，小程序、app、h5均生效。参考style设置每个页面的状态栏、导航条、标题、窗口背景色等

如果你在全局的配置中配置了默认标题，但是页面地址部分同样配置了标题，全局标题会被覆盖

    "path": "pages/index/index",
    "style": 
        "navigationBarTitleText": "主页",  
    
,

• 备注：单页面style中配置项会覆盖 globalStyle 中相同的配置项。

2. 全局取消原生导航栏

注：一般App里不会使用这个参数配置。建议个别页面单独设置不使用原生导航。

在pages.json的globalStyle里有个navigationStyle设置，默认是default，即带有原生导航栏。
navigationStyle设置为custom后，所有页面都没有原生导航。

说明：但在微信小程序里，右上角始终都有一个胶囊按钮。很多微信小游戏界面上也没原生导航栏，但有胶囊按钮。

"globalStyle": 
    "navigationStyle": "custom",
,

3. 单页面去除原生导航栏

说明：自微信客户端 7.0.0 起、App端HBuilderX 2.0.3起，支持通过如下方法取消单独一个页面的原生导航栏。但小程序右上角胶囊按钮仍然去不掉。页面配置 navigationStyle 为 custom：

  
    "path" : "pages/index/index",  
    "style" :   
        "navigationStyle":"custom"