tyswk
tyswk
  • 发布:2018-07-30 17:32
  • 更新:2018-07-30 17:32
  • 阅读:8002

nview在uni-app中实现原生自定义titlebar

分类:uni-app

uni-app出来了,研究后发现并不是想象的那样以为是nml,新版会支持ios打包。uni-app究竟是什么?实际上就是h5+加入了vue。
为什么能发布小程序,我猜实际上是把源代码的变量,函数,api等经过一系列的替换成小程序的源码。

1、uni-app的titlebar和tabbar是原生的组件,速度非常快。但是titlebar可自定义不强。开始想着在uni-app中webview中实现的html模拟的titlebar

//先隐藏太监式的titlebar  
"globalStyle": {  
    "navigationStyle":"custom"  
},

2、在切换页面时控制原生自定义的ntitlebar的显示与隐藏。
最好全局创建一个公用的ntitlebar,需要的时候只控制隐藏与显示,并传参数:改变title,显示返回图标,显示菜单图标,显示搜索图标,显示搜索框等)这个还没研究(主要在事件穿透和显示上,肯定能实现,待深入...),即使用下面的创建与销毁都比webview要快不少,感觉完成整个blank页面的切换显示ntitlebar只需10ms左右。在uni-app中webview中实现的titlebar切换显示大概得150ms-300ms左右。

onShow:function(option){  
    var ntitlebar = new plus.nativeObj.View('test',  
        {top:'0px',left:'0px',height:'49px',width:'100%',backgroundColor:'#3A3A3A',statusbar:{background:'#333333'}},  
        [  
            {tag:'rect',id:'rect',color:'#FF0000',position:{top:'12px',left:'12px',width:'24px',height:'24px'}},  
            {tag:'font',id:'font',text:'原生控件',textStyles:{size:'18px'}}  
        ]  
    );  
},  
onHide:function(option){  
    this.global.ntitlebar.close();  
},
1 关注 分享
Neil_HL

要回复文章请先登录注册