底部导航栏中间突出_用友YonBIP开发者社区

xingcream

还是方案四好引用了

渔夫11

楼主，我说小白能给个源码参考下不{:soso__3409329614010722382_4:}

houxiaoling

OSChina 发表于 2016-10-14 00:03
给你几种方案：
1、原生模块。缺点：很多东西无法定制，受制于人。优点：简单快捷

是否方便贴个代码

houxiaoling

渔夫11 发表于 2017-2-16 17:13
楼主，我说小白能给个源码参考下不{:soso__3409329614010722382_4:}

是不是有源码，可以贴一个不？

かれたそ時

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style media="screen">
html,
body {
height: 100%;
background-color: white;
}
#container {
height: 100%;
display: flex;
display: -webkit-flex;
display: -webkit-box;
}
#container>.item {
width: 20%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
margin-bottom: 5px;
}
#container>.item.item-shouye {
background-image: url(../image/all-gray.png);
}
#container>.item.item-shouye.active {
background-image: url(../image/all.png);
color: #FD7158;
}
#container>.item.item-faxian {
background-image: url(../image/favorite-gray.png);
}
#container>.item.item-faxian.active {
background-image: url(../image/favorite.png);
color: #FD7158;
}
#container>.item.item-xiaoxi {
background-image: url(../image/location-gray.png);
}
#container>.item.item-xiaoxi.active {
background-image: url(../image/location.png);
color: #FD7158;
}
#container>.item.item-wode {
background-image: url(../image/usercenter-gray.png);
}
#container>.item.item-wode.active {
background-image: url(../image/usercenter.png);
color: #FD7158;
}
.yinying2 {
-moz-box-shadow: 0px 2px 40px #595959;
-webkit-box-shadow: 0px 2px 40px #595959;
box-shadow: 0px 2px 40px #C0C0C0;
}
</style>
</head>
<body>
<div id="container">
<div class="item clearActive item-shouye active" onclick="randomSwitchBtn(this)">首页</div>
<div class="item clearActive item-faxian" onclick="randomSwitchBtn(this)">发现</div>
<div class="item">唱歌</div>
<div class="item clearActive item-xiaoxi" onclick="randomSwitchBtn(this)">消息</div>
<div class="item clearActive item-wode" onclick="randomSwitchBtn(this)">我的</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
};
//更换frame按钮
function randomSwitchBtn(tag) {
if (tag == $api.dom('.active')) return;
var eFootLis = $api.domAll('#container .clearActive'),
index = 0;
for (var i = 0, len = eFootLis.length; i < len; i++) {
if (tag == eFootLis[i]) {
index = i;
} else {
$api.removeCls(eFootLis[i], 'active');
}
}
$api.addCls(eFootLis[index], 'active');
api.setFrameGroupIndex({
name: 'group',
index: index
});
}
</script>
</html>

复制代码

/*底部导航代码*/

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,
body {
height: 100%;
background-color: transparent;
}
#diange-icon{
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-image: url(../image/start.png);
}
</style>
</head>
<body>
<div id="diange-icon" onclick="fnOpenDiangeWin()">
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
};
function fnOpenDiangeWin(){
//这里写点击中间的突出按钮后的事件
}
</script>
</html>

复制代码

/*中间突出按钮代码*/

apiready = function() {
fnOpenFootFrame();
fnOpenDiangeFrame();
}
//打开点歌图标
function fnOpenDiangeFrame(){
api.openFrame({
name: 'index_diange_frame',
url: 'html/index_diange_frame.html',
rect: {
x: (api.frameWidth - 130) / 2,
y: api.frameHeight - 145,
w: 130,
h: 130
},
pageParam: {
name: 'test'
},
bounces: false,
});
}
//打开底部导航条
function fnOpenFootFrame(){
api.openFrame({
name: 'index_foot_frame',
url: 'html/index_foot_frame.html',
rect: {
x: 0,
y: api.frameHeight - 110,
w: 'auto',
h: 110
},
bounces: false,
bgColor: 'rgba(0,0,0,0)',
vScrollBarEnabled: false,
hScrollBarEnabled: false
});
}

复制代码

/*首页打开底部导航代码*/

かれたそ時

かれたそ時发表于 2018-8-3 14:10
/*底部导航代码*/
/*中间突出按钮代码*/
/*首页打开底部导航代码*/

自己开新项目,也需要做突出导航的底部导航,这是我才写还没有写完的例子,不对之处请多包涵

软杰 · 回复于2018-10-14 17:28:49

这样的访问有个问题就是几个frame页openFrame方法打开切换时中间的点歌图标凸出部分会闪烁