MUI、HTML5+、HBuilder实现透明渐变导航栏+自定义按钮（右上角分享按钮）

先上效果图：

js代码：

mui.plusReady(function() {
			var ws = plus.webview.currentWebview();
			ws.setStyle({
				"titleNView":{
					backgroundColor: '#f7f7f7',//导航栏背景色
                    titleText: '透明渐变(native模式)',//导航栏标题
				    titleColor: '#000000',//文字颜色
				    type:'transparent',//透明渐变样式
				    buttons:[{
				    	text:'',
				    	float:'right',
				    	type:'share',
				        onclick:"javascript:plus.webview.currentWebview().evalJS('shareHref();')"
				    }],
				    autoBackButton: true,//自动绘制返回箭头
				    splitLine:{//底部分割线
				        color:'#cccccc'
				    }
				}
			})
		})

html代码：

		

			
			

				

					
				
				
首对“海归”大熊猫双胞胎回到中国
			
			
			
			

				
				

					
中国新闻网
					
发表于
					
2018-12-05 04:22
				
				
				

					
    12月4日，旅奥大熊猫龙凤胎“福凤”“福伴”顺利回到中国大熊猫保护研究中心，入住卧龙神树坪基地隔离检疫区，成为首对“海归”大熊猫双胞胎。大熊猫“福凤”“福伴”于2016年8月7日在奥地利美泉宫动物园出生。大熊猫“福凤”为雌性，体重60kg，爱吃竹笋和红薯，比较贪玩。 大熊猫“福伴”为雄性，体重55kg，喜欢攀爬、玩雪，对一切新鲜的事物都充满好奇心，社交能力强。（来源：中国新闻网）

     
    工作人员卸下装有大熊猫的笼舍。（来源：中国新闻网）

     
    工作人员引诱大熊猫出笼。（来源：中国新闻网）

     
    大熊猫“福凤”在保护研究中心都神树坪基地开始熟悉环境。（来源：中国新闻网）

     
    大熊猫“福凤”“福伴”在在保护研究中心神树坪基地。（来源：中国新闻网）

				
			
		
	

参数：

窗口标题栏自定义按钮样式

属性：

• type: (String 类型 )按钮样式

  运行环境中内置按钮样式直接使用，内置样式忽略fontSrc和text属性。 可取值： "forward" - 前进按钮； "back" - 后退按钮； "share" - 分享按钮； "favorite" - 收藏按钮； "home" - 主页按钮； "menu" - 菜单按钮； "close" - 关闭按钮； "none" - 无样式。 默认值为无样式（"none"），需通过text属性设置按钮上显示的内容、通过fontSrc属性设置使用的字体库。

• color: (String 类型 )按钮上文字颜色

  可取值： "#RRGGBB"格式字符串，如"#FF0000"表示绘制红色返回键； "rgba(R,G,B,A)"，其中R/G/B分别代表红色值/绿色值/蓝色值，正整数类型，取值范围为0-255，A为透明度，浮点数类型，取值范围为0-1（0为全透明，1为不透明），如"rgba(255,0,0,0.5)"，表示红色半透明。 默认值为窗口标题栏控件的标题文字颜色。

• colorPressed: (String 类型 )按下状态按钮文字颜色

  可取值： "#RRGGBB"格式字符串，如"#FF0000"表示绘制红色返回键； "rgba(R,G,B,A)"，其中R/G/B分别代表红色值/绿色值/蓝色值，正整数类型，取值范围为0-255，A为透明度，浮点数类型，取值范围为0-1（0为全透明，1为不透明），如"rgba(255,0,0,0.5)"，表示红色半透明。 默认值为color属性值自动调整透明度为0.3。

• float: (String 类型 )按钮在标题栏上的显示位置

  可取值： "right" - 在标题栏中靠右排列显示； "left" - 在标题栏中靠左侧排列显示（在返回键后）。 默认值为"right"。

• fontWeight: (String 类型 )按钮上文字的粗细

  可取值： "normal" - 标准字体； "bold" - 加粗字体。 默认值为"normal"。

• fontSize: (String 类型 )按钮上文字大小

  可取值：字体高度像素值，数字加"px"格式字符串，如"22px"。 窗口标题栏为透明样式（type="transparent"）时，默认值为"22px"； 窗口标题栏为默认样式（type="default"）时，默认值为"27px"。

• fontSrc: (String 类型 )按钮上文字使用的字体文件路径

  字体文件路径支持以下类型： 相对路径 - 相对于当前页面的host位置，如"a.ttf"，注意当前页面为网络地址则不支持； 绝对路径 - 系统绝对路径，如Android平台"/sdcard/a.ttf"，此类路径通常通过其它5+ API获取的； 扩展相对路径URL(RelativeURL) - 以"_"开头的相对路径，如"_www/a.ttf"； 本地路径URL - 以“file://”开头，后面跟随系统绝对路径。

• onclick: (WebviewCustomButtonCallback 类型 )按钮点击后触发的回调函数

  回调函数中将返回此JSON对象。

• text: (String 类型 )按钮上显示的文字

  推荐使用一个字符，超过一个字符可能无法正常显示，使用字体图标时unicode字符表示必须'\u'开头，如"\ue123"（注意不能写成"\e123"）。

官方参考文档：http://ask.dcloud.net.cn/article/1246

http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles