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

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

分类: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

要回复文章请先登录注册

4***@qq.com

4***@qq.com

回复 DCloud_UNI_CHB :
谢谢!
2017-11-22 16:09
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 4***@qq.com :
文档中已补充首页使用的办法,需要在manifest.json中配置
2017-11-22 15:51
4***@qq.com

4***@qq.com

回复 DCloud_UNI_CHB :
好的,谢谢。还有一个问题,如果我想在首页使用这个功能,该怎么做到呢。
2017-11-22 10:35
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 4***@qq.com :
早就有了,github地址:https://github.com/dcloudio/mui/blob/master/examples/hello-mui/examples/nav_transparent_native.html
2017-11-17 15:28
4***@qq.com

4***@qq.com

回复 DCloud_UNI_CHB :
请问怎么查看示例?我现在版本是8.8.4,新建Hello mui项目中只有div模式没有native模式
2017-11-17 10:14
ilijiayin

ilijiayin

如果页面中存在mui-scroll-wrapper,透明导航栏不出现,有没有解决方案
2017-09-27 11:24
wenju

wenju

mark
2017-09-01 22:55
3***@qq.com

3***@qq.com

hos_detail = mui.preload({
url: 'hosHP.html',
id: 'hosHP.html',
styles: {

"titleNView": { //配置原生标题
'backgroundColor': '#f7f7f7',//导航栏背景色
'titleText': '透明渐变(native模式)',//导航栏标题
'titleColor': '#000000',//文字颜色
type:'transparent',//透明渐变样式
autoBackButton: true,//自动绘制返回箭头
splitLine:{//底部分割线
color:'#cccccc'
}
}
}
});
总是不成功
2017-07-22 19:54
GCJ

GCJ

回复 DCloud_UNI_CHB :
明白了, 3Q!
2017-07-14 16:15
距离您98米

距离您98米

如果我这个页面存在mui-scroll-wrapper,你的透明导航 还能用吗?
2017-07-14 14:06