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"  }
}

uni-app导航栏相关推荐

android 通知栏背景颜色跟随app导航栏背景颜色变化而变化
原文地址为: android 通知栏背景颜色跟随app导航栏背景颜色变化而变化通知栏(notification)背景颜色跟随app导航栏(top title)背景颜色变化而变化. 这也叫沉浸式状态栏 ...
移动APP导航栏设计对比
APP导航栏主要分为以下几种类型:  标签导航  舵式导航  抽屉导航  宫格导航  组合导航  列表导航  Tab导航  轮播导航 1.标签导航标签导航位于页面底部,通常包含5个标 ...
uniapp 如何给搜索框设值_头部导航栏基础设置
> 原生导航的体验更好,渲染新页面时,原生导航栏的渲染无需等待新页面dom加载,可以在新页面进入动画开始时就渲染. > 更多功能参考此示例:https://ext.dcloud.net.c ...
html导航图片滚动条,CSS实现导航栏底部动态滚动条效果
预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在标签中让元素的宽度由0变化到100%,代码很简单,如下所示: CSS样式部分: ul.na ...
ios 系统状态栏样式修改_iOS 一种新的修改导航栏样式的方法（支持iOS10）.
iOS 一种新的修改导航栏样式的方法. 开宗明义: 对系统导航栏最底层的UIView加一层CALayer, 通过操作这个自己创建的CALayer来修改导航栏样式. 修改系统导航栏样式的几种方法 1.使 ...
Flutter 导航栏AppBar
恢弘志士之气,不宜妄自菲薄.--诸葛亮 People of noble ambition should not belittle themselves. zhugeliang 以上效果是谷歌 ...
Android状态栏和导航栏透明和沉浸式模式
最近在App上需要对状态栏进行相关的设置,在网上看了些文章,像郭神的沉浸式那篇博客对我启发蛮大,但是对状态栏的设置,包括隐藏,透明,颜色设置等,并没有比较系统的概念,实现方式不止一种,有操作Windo ...
uni app 手机端导航栏自定义
uni app 手机端导航栏自定义第一步:明确顶部导航栏的构成(手机自带的顶部菜单+开发的顶部菜单栏) 获取手机自带的顶部导航栏 <view class="navigation_ba ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
uni-app小程序onShow执行两次；微信小程序onShow重复执行原因；导航栏tabBar页的onLoad函数不执行；App.vue页的onShow执行原因；onShow莫名其妙执行
1.只有五种情况会触发导航栏tabBar页的onLoad函数,分别是: –1.1:首次进入到导航栏tabBar页面: –1.2:从微信分享进入的导航栏tabBar页面: –1.3:识别二维码跳转到小程 ...

uni-app导航栏

uni-app导航栏

1. 原生导航栏

原生导航优点

原生导航缺点

原生导航栏的通用配置：

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

单页面导航栏样式设置：

2. 全局取消原生导航栏

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

uni-app导航栏相关推荐

最新文章

热门文章