锐客网

  1. 首页 > 睿知 > it技术 > >

app点击底部菜单切换标题

IT知识标题底部菜单切换

仰天大笑出门去，我辈岂是蓬蒿人。这篇文章主要讲述app点击底部菜单切换标题相关的知识，希望能为你提供帮助。
【app点击底部菜单切换标题】< !DOCTYPE html>
< html>
< head>
< meta charset="utf-8">
< meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
< meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
< title> 昌邑智慧园林< /title>
< link rel="stylesheet" type="text/css" href="https://www.songbingjia.com/css/aui.css" />
< link rel="stylesheet" type="text/css" href="https://www.songbingjia.com/css/aui-skin.css" />
< style>
.aui-bar-light {
background-color: #019c8a;
}
.aui-bar-nav .aui-title {
color: #fff;
}
.box {
display: none;
}
.show {
display: block;
}
.foot-btn {
width: 1.2rem;
display: block;
position: relative;
left: 50%;
margin-left: -0.6rem;
}
.aui-dot{
top: 0.5rem;
right: 10%;
}
.icon-img{
width: 1rem;
}
< /style>
< /head>
< body>
< header id="header">
< section class="aui-bar aui-bar-nav aui-bar-light box show " id="index_btn">
< div class="aui-title" id="titleName"> 昌邑智慧园林< /div>
< a class="aui-pull-right aui-btn">
< span class="aui-iconfont aui-icon-refresh"> < /span>
< /a>
< /section>
< section class="aui-bar aui-bar-nav aui-bar-light box">
< div class="aui-title"> 报警信息< /div>
< /section>
< section class="aui-bar aui-bar-nav aui-bar-light box">
< div class="aui-title"> 个人中心< /div>
< /section>
< /header>
< footer class="aui-bar aui-bar-tab" id="footer">
< div class="aui-bar-tab-item tit-in aui-active " tapmode onclick="newsgroupeOn(0,this)">
< i class="aui-iconfont aui-icon-home"> < /i>
< div class="aui-bar-tab-label"> 实时跟踪< /div>
< /div>
< div class="aui-bar-tab-item" tapmode onclick="newsgroupeOn(1,this)">
< i class="aui-iconfont tit-in aui-icon-star"> < /i>
< div class="aui-bar-tab-label"> 报警信息< /div>
< /div>
< div class="aui-bar-tab-item" tapmode onclick="newsgroupeOn(2,this)">
< i class="aui-iconfont tit-in aui-icon-cart"> < /i>
< div class="aui-bar-tab-label"> 个人中心< /div>
< /div>
< /footer>
< /body>
< script type="text/javascript" src="https://www.songbingjia.com/script/api.js"> < /script>
< script type="text/javascript">
var delay,header;
apiready = function(){
header= document.querySelector(‘header‘);
$api.fixStatusBar(header);
api.parseTapmode();
delay = api.systemType != ‘ios‘ ? 300 : 0;
openFrameGroup();
};
function openFrameGroup(){
var header_h = header.offsetHeight;
var footer_h = footer.offsetHeight;
api.openFrameGroup({
name: ‘newsGroup‘,
rect: {
x: 0,
y: header_h,
w: ‘auto‘,
h: ‘auto‘,
marginBottom:footer_h
},
bounces:true,
scrollEnabled: false,
frames: [{
name: ‘main_map_frm‘,
url: ‘main_map_frm.html‘
},{
name: ‘main_alarm_frm‘,
url: ‘main_alarm_frm.html‘
},{
name: ‘my_frm‘,
url: ‘my_frm.html‘
}]
}, function(ret, err) {
// if (ret) {
//alert(JSON.stringify(ret));
// } else {
//alert(JSON.stringify(err));
// }
});
}
//tab切换
// function newsgroupeOn(index, obj){
//var btitInBtn = document.querySelector(".aui-active");
//btitInBtn.classList.remove("aui-active");
//obj.classList.add("aui-active");
//if (index == 0) {
//document.getElementById(‘titleName‘).innerHTML=‘昌邑智慧园林‘;
//}else if (index == 1) {
//document.getElementById(‘titleName‘).innerHTML=‘报警信息‘;
//}else if (index == 2) {
//document.getElementById(‘titleName‘).innerHTML=‘个人中心‘;
//}
//api.setFrameGroupIndex({
//name: ‘newsGroup‘,
//index: index,
//scroll: false
//})
// }
//
function newsgroupeOn(index, obj){
var btitInBtn = document.querySelector(".aui-active");
btitInBtn.classList.remove("aui-active");
obj.classList.add("aui-active");
var boxShow = document.querySelector(‘.box.show‘);
boxShow.classList.remove("show");
var box = document.querySelectorAll(‘.box‘);
box[index].classList.add(‘show‘);
// api.setFrameGroupIndex({
//name: ‘newsGroup‘,
//index: index,
//scroll: false
// })
}
function closethiswin(){
api.closeWin({
});
}
< /script>
< /html>


















































































































































    推荐阅读


    上一篇：Android-图像原理/绘制原理

    下一篇：appium启动