hbuilder怎么在电脑网页右上角添加导航栏

 我来答
lilipat
高粉答主

2018-12-20 · 每个回答都超有意思的
知道大有可为答主
回答量:3万
采纳率:94%
帮助的人:5006万
展开全部

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>&nbsp;&nbsp;&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;&nbsp; <p>&nbsp;&nbsp;&nbsp;&nbsp;工作人员卸下装有大熊猫的笼舍。(来源:中国新闻网)</p><img style="max-width:800px;" src="http://pic-bucket.nosdn.127.net/photo/0001/2018-12-05/E282OFBG00AN0001NOS.jpg"><br>&nbsp;&nbsp;&nbsp;&nbsp; <p>&nbsp;&nbsp;&nbsp;&nbsp;工作人员引诱大熊猫出笼。(来源:中国新闻网)</p><img style="max-width:800px;" src="http://pic-bucket.nosdn.127.net/photo/0001/2018-12-05/E282OFBH00AN0001NOS.jpg"><br>&nbsp;&nbsp;&nbsp;&nbsp; <p>&nbsp;&nbsp;&nbsp;&nbsp;大熊猫“福凤”在保护研究中心都神树坪基地开始熟悉环境。(来源:中国新闻网)</p><img style="max-width:800px;" src="http://pic-bucket.nosdn.127.net/photo/0001/2018-12-05/E282OFBI00AN0001NOS.jpg"><br>&nbsp;&nbsp;&nbsp;&nbsp; <p>&nbsp;&nbsp;&nbsp;&nbsp;大熊猫“福凤”“福伴”在在保护研究中心神树坪基地。(来源:中国新闻网)</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")。

作者:胶泥座人 

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式