原生导航栏控件navigationbar使用说明

使用说明"/>

原生导航栏控件navigationbar使用说明

概念澄清

HBuilder8.0.1版更新说明中App模块【重要】更新，新增原生导航栏控件。
navigationbar在js层也是nativeObj.View对象，可再次自由绘制定义。建议非必要不使用双webview模式的webview title，而改用原生title。
以往，为了解决列表流畅滚动等问题，采用了双webview模式等方案。现在有了navigationbar后，可以减少webview的数量，进而大幅提高应用的整体性能。

实际使用

可用属性

目前只有三个属性可以配置
1. backgroundcolor 导航栏背景颜色，字符串类型，格式为“#RRGGBB”，默认值为灰黑色（#1B1A1F）
2. titletext 导航栏标题文字内容，默认值为当前应用的标题； titlecolor：导航栏标题文字颜色，字符串类型，格式为“#RRGGBB”
3. titlecolor 导航栏标题文字颜色，字符串类型，格式为“#RRGGBB”，默认值为白色（#FFFFFF）

ps：注意属性的大小写。并且高度是固定的，为44px。

首页配置

首页的navigationbar需要在manifest.json文件中配置。
plus->launchwebview->navigationbar

"plus": {"launchwebview": {"navigationbar": {"backgroundcolor": "#f7f7f7","titletext": "首页","titlecolor": "#ff461f"}}
}

非首页webview

该属性必须在创建webview时就设置，不支持动态setStyle修改。

var homeWv = plus.webview.create('home.html', 'home', {navigationbar: {titletext: 'home页'}
});
homeWv.show('slide-in-right');

mui扩展

mui.openWindow({url: 'home.html',id: 'home',styles: {navigationbar: {titletext: 'home页'}}
})

补充
navigationbar的高度是固定的，为了方便开发者，mui-v3.5.1开始提供了更为灵活的方案。

mui.openWindowWithTitle(WebviewOptions,{title:{//标题配置text:'home页',},back:{//左上角返回箭头image:{//图片格式base64Data:''//加载图片的Base64编码格式数据 base64Data 和 imgSRC 必须指定一个.否则不显示返回箭头}}
});

关于openWindowWithTitle方法，请参考mui相关文档。

获取navigationbar对象

通过getNavigationbar()方法，可以获取webview窗口的导航栏控件对象。

var navigationbar = plus.webview.currentWebview().getNavigationbar();

绘制更多内容

更新说明中提到，navigationbar在js层是nativeObj.View对象，可以通过相关方法进行更多内容的绘制。
最新的Hello Mui示例工程，首页的icon的绘制就是这样实现的，在最新的HBuilder中新建Hello Mui示例工程即可体验并查看相关源码。

更多

更多关于HBuilder8.0的更新，以及manifest.json的配置，参考相关文章。
感谢80万开发者厚爱，HBuilder8.0正式发布 【内含重要性能优化新策略】
Manifest.json文档说明 manifest配置

最后附上一个简单的示例源码，解压后真机运行即可。

• navigationbar.zip

================== 通过对源码的分析，关于不能生成导航栏的原因是由于需要在Manifest.json中配置：
"plus": { "launchwebview": {
            "navigationbar": {
               "backgroundcolor": "#f7f7f7",
               "titletext": "首页",
               "titlecolor": "#000000"
            }
        },
  "popGesture": "close",/*设置应用默认侧滑返回关闭Webview窗口，none为无侧滑返回功能，hide为侧滑隐藏Webview窗口。参考ask.dcloud.net.cn/article/102*/
配置后，就能通过获取到getnavigationbar获取到数据。
来源：