apicloud怎么调用导航栏效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了apicloud怎么调用导航栏效果相关的知识，希望对你有一定的参考价值。
参考技术A <!doctype html><html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="../css/weui.css"/>
<link rel="stylesheet" href="../css/weui2.css"/>
<link rel="stylesheet" href="../css/weui3.css"/>
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<script src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
</head>
<body ontouchstart style="background-color: #f8f8f8;">
<header class="aui-bar aui-bar-nav" id="aui-header">顶部导航栏</header>
<footer class="aui-bar aui-bar-tab" id="footer">
<div id="tabbar1" class="aui-bar-tab-item aui-active" onclick="randomSwitchBtn(0)">
<i class="aui-iconfont aui-icon-home"></i>
<div class="aui-bar-tab-label">首页</div>
</div>
<div id="tabbar2" class="aui-bar-tab-item" tapmode onclick="randomSwitchBtn(1)">
<i class="aui-iconfont aui-icon-phone"></i>
<div class="aui-bar-tab-label">未接</div>
</div>
<div id="tabbar3" class="aui-bar-tab-item" tapmode onclick="randomSwitchBtn(2)">
<i class="aui-iconfont aui-icon-cart"></i>
<div class="aui-bar-tab-label">已结</div>
</div>
<div id="tabbar4" class="aui-bar-tab-item" tapmode onclick="randomSwitchBtn(3)">
<i class="aui-iconfont aui-icon-my"></i>
<div class="aui-bar-tab-label">呼出</div>
</div>
</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function()
//获取顶部菜单元素
var header = $api.byId('aui-header');
//获取元素在页面中的位置与宽高
var headerPos = $api.offset(header);
//获取窗口高度
var body_h = api.winHeight;
//获取底部导航的高度
var footer_h = $api.offset(footer).h;
//导航页面组
api.openFrameGroup (
name: 'group1',
background: '#fff',
scrollEnabled:true,
//导航页面显示的长宽高
rect:
x: 0, //左边从哪里显示
y: headerPos.h, //从哪个高度下显示
w: 'auto', //宽度
h: body_h - headerPos.h - footer_h //页面显示的高度
,
//初始导航页面显示
index: 0,
//导航页面组
frames: [
name: 'testframe1',
url: 'testframe1.html',
bgColor: '#fff'
,
name: 'testframe2',
url: 'testframe2.html',
bgColor: '#fff'
,
name: 'testframe3',
url: 'testframe3.html',
bgColor: '#fff'
,
name: 'testframe4',
url: 'testframe4.html',
bgColor: '#fff'
]
, function(ret, err)
if( ret )
alert( JSON.stringify( ret ) );
else
alert( JSON.stringify( err ) );
);
//点击实现导航页面跳转，对应导航菜单常亮
function randomSwitchBtn(index)
//放入对应的导航页面参数,实现导航跳转
api.setFrameGroupIndex(
name: 'group1',
index: index,
scroll: true
);
</script>
</html> 参考技术B ive, maybe it is not after greeting the town all th
以上是关于apicloud怎么调用导航栏效果的主要内容，如果未能解决你的问题，请参考以下文章