<!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/aui.css"/>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
</head>
<body>
<!-- 头部标题 -->
<header class="aui-bar aui-bar-nav aui-bar-light">
<a class="aui-pull-left aui-btn" id="left-btn" style="display: none;">
<!-- 编辑 -->
<span class="aui-iconfont aui-icon-left" style="color: #FFF;font-size: 1.5rem;"></span>
</a>
<div class="aui-title" id="center-title"></div>
<a class="aui-pull-right aui-btn" id="right-btn">
<!-- 搜索 -->
<span class="aui-iconfont aui-icon-search" tapmode="hover" id="search" onclick="uploadVideo('search')" style="color: #FFF;font-size: 1.5rem;"></span>
<!-- 上传视频 -->
<span class="aui-iconfont aui-icon-video" tapmode="hover" onclick="uploadVideo('video')" id="video" style="color: #FFF;font-size: 1.5rem;display: none;"></span>
</a>
</header>
<!-- 底部导航 -->
<footer class="aui-bar aui-bar-tab" id="footer">
<div class="aui-bar-tab-item aui-active" tapmode >
<i class="aui-iconfont aui-icon-calendar"></i>
<div class="aui-bar-tab-label">任务中心</div>
</div>
<div class="aui-bar-tab-item" tapmode>
<i class="aui-iconfont aui-icon-star"></i>
<div class="aui-bar-tab-label">优券</div>
</div>
<div class="aui-bar-tab-item" tapmode>
<!-- <div class="aui-badge">99</div> -->
<i class="aui-iconfont aui-icon-cert"></i>
<div class="aui-bar-tab-label">我的订单</div>
</div>
<div class="aui-bar-tab-item" tapmode>
<!-- <div class="aui-dot"></div> -->
<i class="aui-iconfont aui-icon-my"></i>
<div class="aui-bar-tab-label">个人中心</div>
</div>
</footer>
</body>
</html>
<script type="text/javascript" src="../script/aui-tab.js" ></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function () {
$api.fixStatusBar($api.dom('header'));
api.setStatusBarStyle({
style: 'dark',
color: '#fff'
});
var simInfoImp = api.require('simInfoImp');
simInfoImp.getDeviceId(function(ret) {
$api.setStorage('phoneMime', ret.deviceId);
});
exitNowApp();
var tab = new auiTab({
element:$api.byId('footer'),
index:1,
repeatClick:false
},function(ret){
open_frm(ret);
});
openFrames('task',1);
$api.html($api.byId('center-title'), '任务中心');
}
//点击刷新
function taskList(){
openFrames('task',1);
}
/**
* 底部菜单
* @Author kiwi
* @DateTime 2018-09-16
* @license [license]
* @version [version]
*/
function open_frm(ret){
switch (ret.index) {
case 1:
openFrames('task',ret.index);
document.getElementById('search').style.display = 'block'
document.getElementById('video').style.display = 'none'
$api.html($api.byId('center-title'), '任务中心');
break;
case 2:
openFrames('quan',ret.index);
document.getElementById('search').style.display = 'none'
document.getElementById('video').style.display = 'none'
$api.html($api.byId('center-title'), '优券');
break;
case 3:
openFrames('order',ret.index);
document.getElementById('search').style.display = 'none'
document.getElementById('video').style.display = 'block'
$api.html($api.byId('center-title'), '我的订单');
break;
case 4:
openFrames('personal',ret.index);
document.getElementById('search').style.display = 'none'
document.getElementById('video').style.display = 'none'
$api.html($api.byId('center-title'), '个人中心');
break;
}
}
function openFrames(pages,index){
var reload = false;
if (index==1||index==3) {
reload = true;
}
$api.setStorage('index', index);
var header = $api.dom('header');
$api.fixStatusBar(header);
var headerPos = $api.offset(header).h;
var footer_h = $api.offset($api.dom('footer')).h;
api.openFrame({
name: pages,
url: '../html/'+pages+'.html',
rect: {
x: 0,
y: headerPos,
w : 'auto',
h: api.winHeight - headerPos - footer_h
},
reload: reload //重新加载页面
});
}
//退出APP
function exitNowApp(){
$api.setStorage('isFullScreen',0);
//按两次退出应用
api.addEventListener({
name : 'keyback'
}, function(ret, err) {
//全屏时 需要发送事件 并关闭全屏
var isFullScreen = $api.getStorage('isFullScreen');
//如果全屏 只关闭全屏
if(isFullScreen == '1'){
api.sendEvent({
name: 'clickhome',
extra: {}
});
}else{
api.toast({
msg : '再点一次退出应用',
duration : 2000,
location : 'bottom'
});
api.addEventListener({
name : 'keyback'
}, function(ret, err) {
if($api.getStorage('isFullScreen' == "0")){
api.sendEvent({
name: 'clickhome',
extra: {}
});
}else{
api.closeWidget({
silent : true
});
}
});
}
setTimeout(function() {
}, 2000)
});
}
function uploadVideo(param){
api.openWin({
name: param,
url: '../html/'+param+'.html',
pageParam: {
name: 'value'
}
});
}
</script>
Apicloud 底部导航实现
最新推荐文章于 2024-05-12 04:40:08 发布