使用HBuilder实现oc中的TabarController 底部导航栏的效果
本文的参考:http://ask.dcloud.net.cn/article/650
在实现该功能之前先介绍一点基础知识
首先我们现在html5plus官网看一下webview API文档:http://www.html5plus.org/doc/zh_cn/webview.html,这里我们重点看一下下面几个方法:
WebviewObject plus.webview.create( url, id, styles, extras );
说明：
创建Webview窗口，用于加载新的HTML页面，可通过styles设置Webview窗口的样式，创建完成后需要调用show方法才能将Webview窗口显示出来。
显示Webview窗口
void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );
说明：
显示已创建或隐藏的Webview窗口，需先获取窗口对象或窗口id，并可指定显示窗口的动画及动画持续时间。
隐藏Webview窗口
void plus.webview.hide( id_wvobj, aniHide, duration, extras );
说明：
根据指定的WebviewObject对象或id隐藏Webview窗口，使得窗口不可见。
获取当前窗口的WebviewObject对象
WebviewObject plus.webview.currentWebview();
说明：
获取当前页面所属的Webview窗口对象。
查找指定标识的WebviewObject窗口
WebviewObject plus.webview.getWebviewById( id );
说明：
在已创建的窗口列表中查找指定标识的Webview窗口并返回。 若没有查找到指定标识的窗口则返回null，若存在多个相同标识的Webview窗口，则返回第一个创建的Webview窗口。 如果要获取应用入口页面所属的Webview窗口，其标识为应用的%APPID%，可通过plus.runtime.appid获取。
创建并打开Webview窗口
WebviewObject plus.webview.open( url, id, styles, aniShow, duration, showedCB );
说明：
创建并显示Webview窗口，用于加载新的HTML页面，可通过styles设置Webview窗口的样式，创建完成后自动将Webview窗口显示出来。
以上来源于html5plus文档，只列举了部分最常用的方法，旨在为后文做铺垫，由于不是文档，所以也得也不清楚，如果想详细了解请看这里html5plus webview API。
mui框架将很多功能配置都集中在mui.init方法中，要使用某项功能，只需要在mui.init方法中完成对应参数配置即可，目前支持在
mui.init
方法中配置的功能包括：创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载、设置系统状态栏背景颜色。
mui需要在页面加载时初始化很多基础控件,如监听返回键,因此务必在每个页面中调用.
mui.init({
//子页面
subpages: [{
//...
}],
//预加载
preloadPages:[
//...
],
//下拉刷新、上拉加载
pullRefresh : {
//...
},
//手势配置
gestureConfig:{
//...
},
//侧滑关闭
swipeBack:true, //Boolean(默认false)启用右滑关闭功能
//监听Android手机的back、menu按键
keyEventBind: {
backbutton: false, //Boolean(默认truee)关闭back按键监听
menubutton: false //Boolean(默认true)关闭menu按键监听 },
//处理窗口关闭前的业务
beforeback: function() {
//...
//窗口关闭前处理其他业务详情点击 ↑ "关闭页面"链接查看 },
//设置状态栏颜色
statusBarBackground: '#9defbcg', //设置状态栏颜色,仅iOS可用 preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制})
在app开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，mui将该事件封装成了mui.plusReady()方法，涉及到HTML5+的api，建议都写在
mui.plusReady
如下为打印当前页面URL的示例：
mui.plusReady(function(){ console.log("当前页面URL："+plus.webview.currentWebview().getURL());});
以上是简单的介绍,下面开始写具体的代码
使用快捷键生成代码,
mtab
,回车，底部导航栏也出来了，我们修改一下导航栏的内容,把代码稍微调整一下。整体代码如下：
js部分实现的具体代码是:
mui.init();
var Index = 0;
//把子页的路径写在数组里面
var subpages = ['tab-main.html', 'tab-dynamic.html', 'tab-person.html'];
mui.plusReady(function() {
// 获取当前的webview
var self = plus.webview.currentWebview();
for(var i = 0; i < 3; i++) {
//创建webview子页
var sub = plus.webview.create(
subpages[i], //子页url
subpages[i], //子页id
{
top: '45px', //设置距离顶部的距离
bottom: '50px' //设置距离底部的距离
}
);
//如不是我们设置的默认的子页则隐藏，否则添加到窗口中
if(i != Index) {
sub.hide();
}
//将webview对象填充到窗口
self.append(sub);
}
});
执行完我们会发现tab-main.html的内容显示出来了，但是底部切换还不能，因为这里我们还没有监听底部的点击事件。在进行下一步之前，我们可以先做一个小实验，将上面的代码中的top或者bottom改为0,我们会发现，底部栏或者底部栏会被覆盖，这是因为mui一个重要的潜规则，父子结构的页面子页面会比父页面层级高，说白了就是子页面可以盖住父页面。这会导致开发者常犯的一个错误：将弹出层或者弹出菜单写在父页面被子页面盖住的bug。
下面我们需要激活选项卡,对应的代码是:
//当前激活选项
var activeTab = subpages[Index],
title = document.querySelector(".mui-title");
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
//获取目标子页的id
var targetTab = this.getAttribute('href');
if(targetTab == activeTab) {
return;
}
//更换标题
title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
//显示目标选项卡
plus.webview.show(targetTab);
//隐藏当前选项卡
plus.webview.hide(activeTab);
//更改当前活跃的选项卡
activeTab = targetTab;
});
到此,底部操作栏可以切换了,效果如下图
