DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2017-05-31 20:45
  • 更新:2019-09-26 15:33
  • 阅读:33683

原生版本透明渐变导航条使用教程

分类:MUI

mui内置有H5版本的透明渐变导航控件,教程参考mui官网;透明渐变导航是一种解决滚动条通顶的变通方案,相比双webview,具有更高的性能和更好的动画效果;目前5+ runtime也支持了原生实现的透明渐变导航,相比MUI内置的H5模式,具有更高的性能,先看最终效果:

实现方案

非首页使用

在创建webview时,配置titleNView节点即可,示例如下:

var titleNView = {  
    backgroundColor: '#f7f7f7',//导航栏背景色  
    titleText: '透明渐变(native模式)',//导航栏标题  
    titleColor: '#000000',//文字颜色  
    type:'transparent',//透明渐变样式  
    autoBackButton: true,//自动绘制返回箭头  
    splitLine:{//底部分割线  
        color:'#cccccc'  
    }  
}  

//使用mui的窗口打开方式  
mui.openWindow({  
    url:"nav_transparent_native.html",  
    id:"nav_transparent_demo"  
    styles:{  
        titleNView:titleNView  
    }  
});  

//不使用mui的窗口打开方式  
// var webview = plus.webview.create("nav_transparent_native.html", "nav_transparent_demo", {  
//  titleNView:titleNView  
// });  
// webview.show("slide-in-right", 300);  

首页使用

首页若希望使用透明渐变导航,则需要在manifest.json中配置,在manifest.json的plus节点下,增加如下代码:

"launchwebview": {  
    "titleNView": {  
       "backgroundcolor": "#f7f7f7",  
       "titletext": "首页",  
       "titlecolor": "#000000",  
       "type":"transparent"  
    }  
}

注意:
因为已经使用了原生绘制的透明渐变导航,因此目标页面中,无需再编写导航栏DOM,否则会出现双标题情况。

Hello MUI中体验

最新版的Hello MUI已集成了原生渐变导航的示例,在即将发版的HBuilder 8.1.4+ 版本中即可体验,体验路径:
访问http://ask.dcloud.net.cn/article/12553下载最新版HBuilder,新建Hello mui项目,Hello MUI首页--> nav bar(导航栏) --> 透明渐变(native模式)

6 关注 分享
菜鸡 Trust 4***@qq.com nativelearning 听风来 1***@qq.com

要回复文章请先登录注册

pk发型不乱

pk发型不乱

回复 指尖上的代码 :
隐藏和显示原生导航栏
2019-09-26 15:33
任我皮

任我皮

透明状态栏实现 https://blog.csdn.net/jiaonizuoren/article/details/84849891
2019-01-09 16:45
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 p***@sina.com :
原生版本暂不支持返回箭头图标修改,你可以考虑使用H5版本来模拟。
2018-04-01 12:18
1***@qq.com

1***@qq.com

文字图标的底部背景好像无法设置。怎么才能变成透明色 而不是灰色?
2018-03-30 10:26
p***@sina.com

p***@sina.com

如何改变子页面 左上角 初始的 返回箭头图标啊?!!
2018-03-22 14:12
指尖上的代码

指尖上的代码

回复 深井冰_01 :
以前是win10 现在是win7 64 旗舰版 编辑器一直是用最新的,这个版本好些。代码提示没有问题,跳转偶尔会出问题。代码折叠有时候会出现显示错误,没有折叠显示折叠了
2017-12-29 11:27
深井冰_01

深井冰_01

回复 指尖上的代码 :
什么系统?HBuilder版本多少呀?
2017-12-28 12:12
指尖上的代码

指尖上的代码

回复 n***@gmail.com :
是的。https://ask.dcloud.net.cn/question/49942 ,过去好久了,这个应该就是的了。还有就是hbuilder这个编辑器代码提示和按住alt+鼠标左键跳转容易出问题,尤其是跳转给我的感觉是每天必出!重启编辑器就好了。用hbuilder大半年了,一直这样
2017-12-27 17:33
n***@gmail.com

n***@gmail.com

回复 指尖上的代码 :
你所说的子页面应该是点击底部菜单切换的页面,是被顶部的导航给挡住了? 可以在ask上开贴,提供能复现问题截图或者示例工程。
2017-12-04 12:05
指尖上的代码

指尖上的代码

首页配置了原生沉浸式透明渐变的导航,底部菜单也是原生的,切换的子页面的时候首页的导航会挡住子页面
2017-12-04 11:37