51ZionLin
51ZionLin
  • 发布:2017-03-29 16:29
  • 更新:2017-03-29 16:29
  • 阅读:11430

使用plus.nativeObj.View编写一个底部导航栏

分类:HTML5+

众所周知,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纯属抠出来的,源文件包含的太多代码,抠出来的时候可能有点乱。

11 关注 分享
Trust 4***@qq.com 1***@qq.com nivestar DCloud_heavensoft f***@163.com lhyh 5***@qq.com 移动达人 wen如故i Gushxi

要回复文章请先登录注册

y***@qq.com

y***@qq.com

回复 DCloud_heavensoft :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>NativeObj Example</title>
<script type="text/javascript">
var view=null;
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// 创建原生View控件
function createView(){
view = new plus.nativeObj.View('test',
{top:'0px',left:'0px',height:'44px',width:'100%'});
view.draw([
{tag:'img',id:'img',src:'nbg.png',position:{top:'0px',left:'0px',width:'100%',height:'100%'}},
{tag:'rect',id:'rect',color:'#FF0000',position:{top:'0px',left:'0px',width:'100%',height:'1px'}},
{tag:'font',id:'font',text:'原生View控件',textStyles:{size:'18px'},position:{top:'0px',left:'0px',width:'100%',height:'1px'}}
]);
view.show();
}
</script>
</head>
<body>
<button onclick="createView()">创建View对象</button><br/>
</body>
</html>


就是这个draw的demo
2017-06-28 17:39
y***@qq.com

y***@qq.com

回复 DCloud_heavensoft :
直接把官方文档的demo放到hbuilder里面都运行不起来,点击按钮没任何反应
2017-06-28 17:25
移动达人

移动达人

赞一个,不错!
2017-05-31 14:32
51ZionLin

51ZionLin (作者)

回复 DCloud_heavensoft :
原来如此,这些天抽空再看看,IOS下面绘制必须传bitmap对象,但是安卓传路径就行了,这个处理了么?
2017-04-26 09:07
DCloud_heavensoft

DCloud_heavensoft

楼主此文写的较早。在最新的HBuilder8.1里补充了nview的批量绘制api,参考http://html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View.draw

使用这个api,可以一次性把js数据传给nview绘制,减少js和原生的交互次数,因为每次交互都有一定时间损耗,批量绘制的效率更高。
楼主有空可改进下代码。
2017-04-26 06:29