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

发布网友

共2个回答

懂视网

mui内置有H5版本的透明渐变导航控件，教程参考mui官网；透明渐变导航是一种解决滚动条通顶的变通方案，相比双webview，具有更高的性能和更好的动画效果；

下面通过本文给大家分享基于原生JS实现 MUI导航栏透明渐变效果，具体内容详情如下所示：

首先声明：由于backgroundColor的值采用的是RGBA，IE8及以下不支持，所以此效果不支持IE8及以下的浏览器

css代码

body,p,h1{margin: 0;}
.module-layer{
 width: 100%;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 100000;
}
.module-layer-content{
 position: relative;
 min-width: 320px;
 max-width: 750px;
 width: 100%;
 margin: 0 auto;
 background-color: rgba(255, 0, 0, 0.9);
}
.module-layer-bg{
 width: 100%;
 height: 100%;
 background: #000;
 opacity: .7;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
}
.layer-head-name{
 height: 50px;
 line-height: 50px;
 text-align: center;
 padding: 0 50px;
 font-size: 20px;
}
.layer-return,.layer-share{
 width: 50px;
 height: 50px;
 line-height: 50px;
 text-align: center;
 position: absolute;
 top:0;
 z-index: 1;
}
.layer-return{left: 0;}
.layer-share{right: 0;}
.fixed-layer{
 height: 100%;
 display: none;
 z-index: 100001;
}
.relative-layer{height: 100%;}
.layer-content{
 padding:3%;
 position: relative;
 top: 20%;
}
.layer-close{
 width: 2rem;
 height: 2rem;
 position: absolute;
 top:3%;
 right: 3%;
}
.pr {
 position:relative;
}
#shop-input::-webkit-input-placeholder {
 color:#fff;
}
#shop-input:-moz-placeholder {
 color:#fff;
}
#shop-input::-moz-placeholder {
 color:#fff;
}
#shop-input:-ms-input-placeholder {
 color:#fff;
}
#shop-input {
 border:none;
 outline:none;
 background:transparent;
}
.search-box {
 height:30px;
 border-radius:20px;
 top:10px;
 overflow:hidden;
 z-index:10;
}
.search-box:after {
 content:'';
 display:block;
 width:100%;
 height:30px;
 background:#fff;
 opacity:.5;
 position:absolute;
 top:0;
 left:0px;
 z-index:-1;
}
#shop-input {
 height:28px;
 line-height:28px;
 font-size:16px;
 position:absolute;
 top:0;
 left:30px;
}
.shop-search {
 width:16px;
 height:16px;
 position:absolute;
 top:7px;
 left:6px;
}
.layer-return{
 background: url(images/return.png) no-repeat center center/12px 20px;
}
.layer-share{
 background: url(images/share.png) no-repeat center center/20px 30px;
}
a {
 -webkit-tap-highlight-color: transparent;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
}
.module-content{
 min-width: 320px;
 max-width: 750px;
 width: 100%;
 margin: 0 auto;
 background: #fff;
}
.module-content p:first-child img{margin-top: 0;}
.module-content p img{
 display: block;
 width: 100%;
 margin-top: 10px;
}

HTML代码

<header class="module-layer">
 <p class="module-layer-content">
 <p class="layer-return"></p>
 <h1 class="layer-head-name">
 <p class="pr search-box">
 <img class="shop-search" src="images/search.png"/>
 <input id="shop-input" type="text" placeholder="搜索店内商品" value="" />
 </p>
 </h1>
 <p class="layer-share"></p>
 </p>
</header>
<p class="module-content">
 <p><img src="images/banner.png"/></p> 
 <p><img src="images/banner1.png"/></p> 
 <p><img src="images/banner3.png"/></p>
 <p><img src="images/banner4.jpg"/></p>
 <p><img src="images/banner5.png"/></p>
 <p><img src="images/banner6.png"/></p>
 <p><img src="images/banner7.jpg"/></p>
 <p><img src="images/banner8.jpg"/></p>
</p>

JS代码

(function(){
 //获取滚动条当前位置
 function getScrollTop(){ 
 　　var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; 
 　　if(document.body){ 
 　　　　bodyScrollTop = document.body.scrollTop; 
 　　} 
 　　if(document.documentElement){ 
 　　　　documentScrollTop = document.documentElement.scrollTop; 
 　　} 
 　　scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; 
 　　return scrollTop; 
 }
 //获取CSS样式
 function getStyle(element, attr){
 if(element.currentStyle){
 return element.currentStyle[attr];
 }else{
 return window.getComputedStyle(element,null)[attr];
 }
 }
 //获取原始backgroundColor值
 var color = getStyle(document.getElementsByClassName('module-layer-content')[0],'backgroundColor');
 //取到RGB
 var colorRgb = color.substring(0,color.lastIndexOf(',') + 1);
 //取到A
 var colorA = color.substring(color.lastIndexOf(',') + 1,color.length - 1);
 //对A判断，如果最终值小于0.9，直接设置为1
 if(colorA < 0.9){colorA = 1;}
 //设置背景色的A的函数
 var setCoverOpacity = function() {
 document.getElementsByClassName('module-layer-content')[0].style.background = colorRgb + (((getScrollTop() / 550) > colorA) ? colorA : (getScrollTop() / 550)) + ')';
 }
 //初始化函数
 setCoverOpacity();
 //绑定滚动监听事件
 window.addEventListener('scroll',setCoverOpacity,false);
}())

注意：

不兼容IE8及以下的IE浏览器；

550是滚动条到达位置的最终透明度，此处根据需要自定义；

CSS终背景颜色的RGBA的A是最终透明度

热心网友

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>

<h2 id="kr-article-title" class="kr-article-title">首对“海归”大熊猫双胞胎回到中国</h2>

</div>

<div id="kr-article-author" class="kr-article-author">中国新闻网</div>

</div>

<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>

</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 类型 )按下状态按钮文字颜色

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"）。

作者：胶泥座人

全部栏目

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