众所周知,5+plus提供原生绘画对象(View),通过原生绘画对象可以实现很多控件,以及无限遐想空间。
近期因为需要写一款APP,但是需要预加载的太多了,需要顶部栏还需要底部栏,如果用父子页面的话显然太卡了。
因此标题栏以及底部栏我均使用了plus.nativeObj.View “自绘”了顶部栏和底部栏。

如图所示,这仅仅是最简单的一个样子,就像官方说的,还可以在里面画个球...
附件看图,这儿删繁就简。直接展示使用方法。
首先官方文档:http://www.html5plus.org/doc/zh_cn/nativeobj.html
使用方法:
var _footer = new plus.nativeObj.View('footer');
var _a = ['img/jingxuan.png','img/app.png','img/ph.png','img/mine.png'];
var _b = ['img/jingxuan_2.png','img/app_2.png','img/ph_2.png','img/mine_2.png'];
var _c = ['a','b','c','d'];
_fbar.setTabInfo(_footer,_a,_b,_c)
_fbar.setCB(function(tab){
console.log('切换选夹>>'+tab);
});
其中_a 为普通状态图片 _b 为选中状态图片 _c 为选项文本(我一般都是两个字)
关于焦点切换都在js中处理了,开发者只需要在setCB时候传入function,接收即将切换的选夹,并且切换需要显示的webview就行了。
对了,高度为60px,需要如何改进的自行修改js内部。
js纯属抠出来的,源文件包含的太多代码,抠出来的时候可能有点乱。