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代码：
<body>
<div class="mui-content">
<!--顶部banner图 开始-->
<div id="kr-article-banner" class="kr-article-banner">
<div id="kr-article-cover" class="kr-article-cover">
<img width="100%" src="http://pic-bucket.nosdn.127.net/photo/0001/2018-12-05/E282OFBE00AN0001NOS.jpg">
</div>
<h2 id="kr-article-title" class="kr-article-title">首对“海归”大熊猫双胞胎回到中国</h2>
</div>
<!--顶部banner图 结束-->
<div class="kr-article-content">
<!-- 文章作者、发布时间等信息 -->
<div class="kr-article-meta">
<div id="kr-article-author" class="kr-article-author">中国新闻网</div>
<div class="kr-article-text">发表于</div>
<div id="kr-article-time" class="kr-article-time">2018-12-05 04:22</div>
</div>
<!--文章详细内容-->
<div id="kr-article-article" class="kr-article-article" v-html="content">
<p>    12月4日，旅奥大熊猫龙凤胎“福凤”“福伴”顺利回到中国大熊猫保护研究中心，入住卧龙神树坪基地隔离检疫区，成为首对“海归”大熊猫双胞胎。大熊猫“福凤”“福伴”于2016年8月7日在奥地利美泉宫动物园出生。大熊猫“福凤”为雌性，体重60kg，爱吃竹笋和红薯，比较贪玩。 大熊猫“福伴”为雄性，体重55kg，喜欢攀爬、玩雪，对一切新鲜的事物都充满好奇心，社交能力强。（来源：中国新闻网）</p><img style="max-width:800px" src="http://pic-bucket.nosdn.127.net/photo/0001/2018-12-05/E282OFBF00AN0001NOS.jpg"><br>    <p>    工作人员卸下装有大熊猫的笼舍。（来源：中国新闻网）</p><img style="max-width:800px" src="http://pic-bucket.nosdn.127.net/photo/0001/2018-12-05/E282OFBG00AN0001NOS.jpg"><br>    <p>    工作人员引诱大熊猫出笼。（来源：中国新闻网）</p><img style="max-width:800px" src="http://pic-bucket.nosdn.127.net/photo/0001/2018-12-05/E282OFBH00AN0001NOS.jpg"><br>    <p>    大熊猫“福凤”在保护研究中心都神树坪基地开始熟悉环境。（来源：中国新闻网）</p><img style="max-width:800px" src="http://pic-bucket.nosdn.127.net/photo/0001/2018-12-05/E282OFBI00AN0001NOS.jpg"><br>    <p>    大熊猫“福凤”“福伴”在在保护研究中心神树坪基地。（来源：中国新闻网）</p><p></p>
</div>
</div>
</div>
</body>
参数：
窗口标题栏自定义按钮样式
属性：
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"）。
作者：胶泥座人
*** 作步骤如下：1、通过chrome浏览器模拟手机浏览器打开对应页面，初级用户参考这里这里
2、在需要重定义样式的控件（导航栏）上，点击右键，选择“审查元素”，会打开chrome控制台，控制台左侧会显示对应控件的DOM结构，右侧会显示作用在该控件上的CSS定义；在左侧DOM区，切换DOM节点，上方模拟器对应控件及右侧作用的CSS定义均会变化；
3、分析需要重定义的内容，从效果图上直观来看，需要将导航条背景色修改为蓝色，然后将返回图标及导航标题修改为白色；
4、通过DOM结构分析，应该较容易的看出，header节点表示导航条控件，那我们就DOM区选择header节点，然后分析右侧模拟器，会看到header上的所有css定义，找到background-color定义
5、单击background-color对应颜色值，修改成UED设计师提供的蓝色，比如#253ff2，这时上方模拟器上导航条会实时变成蓝色
6、确认颜色值正确后，将修改代码复制到对应页面中，本示例为titlebar.html，保存如下代码（需放在mui.min.css引用之后），这样就可以覆盖mui默认的背景色定义：.mui-bar{
background-color:
#253FF2
}
7、此时再刷新当前页面，就会看到背景色已变；
8、同样的方式，找到标题栏文字颜色定义，找文字颜色时要定位到对应文字的最小节点，对于如下的DOM节点，
导航栏
我们应该优先看h1的css定义，会发现color定义为#000，修改为#fff即可
同样复制保存css定义，如下：.mui-title{
color:#fff
}
9、最后，还剩一个左侧返回箭头的颜色值，我们也以同样的方法修改，左侧DOM区选中
节点，然后在右侧css区查看css定义，找到color颜色定义的地方，然后同样修改为#fff，
10、以同样方式拷贝css代码到html文件，最终复写的css代码为
.mui-bar{
background-color:
#253FF2
}
.mui-title{
color:#fff
}
a{
color:#fff
}
经过如上几个步骤，我们就完成了导航条的自定义，当然在实际开发中，我们可以更为灵活，比如
的css定义牵扯范围太广，我们仅在返回的a节点上增加style属性，在style中定义color，例如：
导航栏
不能每次用mui.openWindow。不用的webview要close，一个webview被close后会露出其他没有被close的webview。
跳转页面要用plus.webview.show方法，新开重复的webview当然是多消耗内存的。
具体参 ebview.html
mui里与webview相关的部分，只是对plus.webview的常用 *** 作做了一些封装，让常用的 *** 作调用更简单。但更全面的api，都在plus.webview里。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）