APICloud如何实现顶部导航栏切换功能
第一步、后台添加模板NVVavigationBar
第二步、在想要添加顶部导航栏的页面上设置如下代码
<!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"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>底部导航</title>
<link rel="stylesheet" type="text/css" href="./css/api.css"/>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<style>
#titles{
position: relative;
width: 100%;
height: 10%;
margin-top: 0%;
margin-left: 0%;
}
</style>
</head>
<body>
<div id="titles">
</div>
</body>
</html>
<script type="text/javascript" src="script/api.js"></script>
<script type="text/javascript" src="script/headed.js"></script>
headed.js代码如下
apiready = function() {
var NVNavigationBar = api.require('NVNavigationBar');
var mySlider = document.getElementById('titles'); //先获取放轮播图的div
NVNavigationBar.open({
rect: {
x:0, //mySlider距离屏幕左边的距离
y:0, //mySlider距离屏幕上边的距离
w: api.winWidth, //mySlider的宽度
h: 20//mySlider的高度
},
styles: {
orientation: 'horizontal',
bg: '#6b6b6b',
bgAlpha: 1,
font: {
size: 14,
sizeSelected: 18,
color: '#FFFFFF',
colorSelected: '#ff0000',
alpha: 1
},
itemSize: {
w: 90,
h: 44
}
},
items: [{
title: '标题一',
bg: '#FFE7BA',
bgSelected: '#ff00000'
}, {
title: '标题二',
bg: '#CDCD00',
bgSelected: '#FFA500'
}, {
title: '标题三',
bg: '#BBFFFF',
bgSelected: '#FFA500'
}, {
title: '标题四',
bg: '#436EEE',
bgSelected: '#FFA500'
}],
selectedIndex: 0,
fixedOn: api.frameName,
id:'first'
}, function(ret, err) {
//if
if (ret) {
if (ret.eventType == "click" && ret.index == 0) {
api.openFrame({
name: 'frame0',
url: 'widget://html/frame0.html',
rect: {
x: 0,
y: 30,
w: 'auto',
h: api.winHeight-20
}
})
}
//1
if (ret.eventType == "click" && ret.index == 1) {
api.openFrame({
name: 'frame1',
url: 'widget://html/frame1.html',
rect: {
x: 0,
y: 30,
w: 'auto',
h: api.winHeight-20
}
})
}
//1
if (ret.eventType == "click" && ret.index == 2) {
api.openFrame({
name: 'frame2',
url: 'widget://html/frame2.html',
rect: {
x: 0,
y: 30,
w: 'auto',
h: api.winHeight-20
}
})
}
//1
if (ret.eventType == "click" && ret.index == 3) {
api.openFrame({
name: 'frame3',
url: 'widget://html/frame3.html',
rect: {
x: 0,
y: 30,
w: 'auto',
h: api.winHeight-20
}
})
}
//1
var NVTabBar = api.require('NVTabBar');
NVTabBar.bringToFront();
}
//if
});
}
实现的效果图如下