uni-app导航栏
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"
}
}