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

来源：互联网发布：英文seo教程编辑：程序博客网时间：2024/05/19 13:24

概念澄清

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获取到数据。

来源：http://ask.dcloud.net.cn/article/1205

0 0