apicloud怎么调用导航栏效果
发布网友
发布时间：2022-05-25 12:10
共2个回答
热心网友
时间：2023-10-26 03:18
<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>
热心网友
时间：2023-10-26 03:18
