uniapp

uni-app 跨平台开发与应用从入门到实践
7.1.1全局取消

在pages.json的globalStyle中存在navigationStyle设置，默认值是default， 即带有原生导航栏: 将其设置为custom后，所有页面将取消原生导航栏。 
温馨提示
一般App里不会使用该参数配置。建议为个别页面单独设置不使用原生导航栏。 在微信小程序中，页面右上角始终有一个胶囊按钮。 
7.1.2单独取消
在页面的style属性中配置navigationStyle为custom可单独取消一个页面的原生导航栏，代码如下
"path":"pages/log/log", "style":{ 
"navigationStyle": "custom" 
0 
ى 
7.2 导航栏样式

在开发App时，需要更灵活的自定义导航栏。因此，uni-app在pages.json文件中的每个page 节点下的style属性下提供了一个子扩展节点:app-plus。该节点定义了在HTML5+App环境下， 即在iOS、Android环境下增强的配置。其中，有一个子节点titleNView是HTML5+规范中Webview 页面的原生导航窗体规范(相关配置文档见“资源文件|网址索引.docx”)。另外，在H5端也实现了titleNView的常用配置，即app-plus节点下配置的titleNView在H5端也会生效。 
下面根据不同需求，对导航栏进行不同的配制。 
7.2.1改变状态栏样式
App默认为沉浸式，因此去除导航栏后，页面顶部会直通状态栏区域，可能会有如下需求。 (1)改变状态栏文字颜色:设置该页面的navigationBarTextStyle属性，可取值为black/white. 如果想单独设置颜色，App端可使用plus.navigator.setStatusBarsStyle方法进行设置。部分Android 4.4 及以下版本的手机不支持设置状态栏前景色。 
(2)改变状态栏背景颜色:绘制一个占位的view固定放置在状态栏的位置，设置此view的

第7章

导航栏的定制

背景颜色，即可达到改变状态栏背景颜色的效果。uni-app提供了一个控制状态栏高度的css变量， 具体参考css变量介绍(相关文档链接见“资源文件网址索引.docx")。 
以下为改变状态栏背景颜色的示例。 在App端添加自定义状态栏，代码如下。 
<!--#ifdef APP-PLUS-> <view class=-"status bar"> 
<view class="top_view"></view> </view> <!--#endif-> 
将自定义状态栏的高度设置为系统状态栏高度，并固定在页面顶部，代码如下。 
status_bar { 
height: var(--status-bar-height); width: 100%; background-color: #F8F8F8; 
.top_view ( 
height: var (--status-bar-height); width: 100%; position: fixed; background-color:#F8F8F8; top:0; z-index:999; 

7.2.2导航栏随着页面滚动渐变
原生导航栏还支持透明渐变效果--页面刚载人时没有导航栏标题，页面内容和状态栏联通，页面向下滚动后导航栏逐渐显示出来。其配置代码如下。 
"path":"pages/log/log", "style":{ 
"navigationBarTitleText": "hello", "app-plus":{ 
"titleNView":{ 
"type": "transparent" 
1# 

uni-app 跨平台开发与应用从入门到实践
透明渐变的导航栏的button图标有一个默认的灰色背景图，以防止背景图和按钮前景颜色相同导致无法看清按钮。如果要删除该灰色背景图，可以配置button的背景颜色为透明: background: ' rgba(0,0,0,0)'. 

7.2.3图片背景

titleNView在uni-app 2.6.3以上版本中可以直接配置图片，并且支持GIF格式。这里提供一个“黑科技”写法，通过在titleNView中配置tags，可以实现在导航栏绘制图片的效果，示例代码如下。 
"path":"nav-image/nav-image", "style":( 
"app-plus":( 
"titleNView":{ 
"titleText": "", "tags":I 
"tag": "img", "src""/static/nav. png", "position":{ 
"left":"auto", "top": "auto", "width":"110px", "height": "26px" 
/ 
通过在titleNView中配置tags除了可以在导航栏绘制图片，还可以绘制更多丰富的内容，如richtext(富文本)、font (文本)、input (输入框)、rect(矩形区域)。
7.3 添加自定义按钮

在titleNView节点中添加自定义的导航按钮，按钮的text内察1-174

第7章导航栏的定制
用的文字较长，建议把字体缩小一些，或调节按钮宽度等。自定义按钮可以添加红点和角标，还能配置为下拉选择按钮。 
1.3.1 红点和角标
要在导航栏右上角显示消息，通常需要给自定义的按钮添加红点或角标。配置示例代码如下。 
"path":"nav-dot/nav-dot", "style":{ 
"navigationBarTitleText":"导航栏带红点和角标"， "app-plus":{ 
"titleNView":{ 
"buttons":I 
"text":"消息"， "fontsize": "14", "redDot":true 
二
ب 
"text":"关注"， "fontsize":"14", "badgeText":"12" 
-1 
7.3.2下拉选择

在涉及似城市选择的功能时，通常需要让自定义按钮提供下拉选项，此时只需要将自定义按钮的select属性配置为true即可。配置示例代码如下。 
"path": "nav-city-dropdown/nav-city-dropdown", "style":{ 
"navigationBarTitleText":"导航栏带城市选择"， "app-plus":1 
"titleNView":{ 
 

第7章导航栏的定制
App、小程序、H5端都支持的，可参考“使用uni.setNavigationBar Title接口动态设置当前页面的标题”一文(相关设置文档链接见“资源文件网址索引.docx")。 
对于App侧扩展的设置，如自己添加的buttons，需使用plus的JS API进行动态设置。在App端可以使用setStyle方法进行设置，包括修改Webview对象的titleNview属性，以达到修改标题栏按钮文字及样式的目的。示例代码如下。 I/tifdef APP-PLUS 
var webView = this.$mp.page. $getAppWebview(); 
1/修改buttons 
//index:按钮索引，style {WebviewTitleNViewButtonStyles } webView.setTitleNViewButtonStyle(0,{ 
text: 'hello', 1: 
川/修改按钮上的角标
//index:按钮索引；text:角标文本内容webView.setTitleNViewButtonBadge ({ 
index: 0, text: 10, HI: 
/设置searchInput的focus Il focus: true I false 
webView.setTitleNViewSearchInputFocus (true) 
1/设置searchInput的text 
webView.setTitleNViewSearchInputText(text) 
1.6绘制App端导航栏
App端导航栏可以使用subnvue进行绘制或使用HTML5+引擎提供的plus.nativeObj接口进行自定义。 
7.6.1 使用subnvue自行绘制导航栏

uni-app支持使用Nvue页面，即Weex原生引擎绘制顶部的原生导航栏。在hello uni-app的API-界面示例中有subnvue示例，其中顶部的导航栏背景颜色为渐变，这就是使用subnvue绘制的原
177

uni-app 跨平台开发与应用从入门到实践
生导航栏。使用subnvue绘制的原生导航栏在pages.json中的配置如下。 
S 
"path": "subnvue/subnvue", "style":1 
"app-plus":( 
"titleNView": false, "subNVues":[I 
"id":"nav", 
"path": "subnvue/subnvue/nav", "type": "navigationBar" 
H 
/ 
温馨提示
HBuilderX从2.6.3版本起，titleNView直接支持设置背景图、渐变色，不再需要使用Subnvue进行绘制， 且性能比使用subnvue绘制的更好。 
7.6.2使用plus.nativeObj.view自定义
titleNView提供的配置虽然全面，但有时仍然无法满足某些场景需求，如在titleNView中绘制一个选项卡，有三种处理方式。 
(1)使用plus.native0bj.view的API自定义titleNView。 (2)页面采用Nvue，即Weex方式制作。 (3)取消原生导航栏，使用view自行绘制选项卡。 
这里介绍第一种方式，即使用plus.nativeObj.view。plus.nativeObj是HTML5+引擎提供的轻量原生渲染引擎，其中plus.nativeObj.view是一个自定义性很强的对象，以下简称nview。nview的规范文档链接见“资源文件！网址索引.docx"。 
nview是一个基于canvas理念的绘制引擎，可以绘制任何界面、线条、矩形、文字、图片， 包括原生的input输入框。本质上，各种界面的对象控件，在计算机底层都是绘图引擎基于draw 字、draw图、draw线条来绘制的。 
nview没有DOM概念，不支持内部滚动。虽然没有Weex强大，但是titleNView、原生cover-view都是基于nview实现的。 
接下来给titleNView右上角添加一个红点，示例代码如下。 
const currentWebview=this.$mp.page.$getAppWebview();//注意相关操作写在APP-PLUs