mui 实现底部tab切换_前端开发-跟版网

1.图标为icon字体，html代码如下：

<nav class="mui-bar mui-bar-tab">
<a id="defaultTab" class="mui-tab-item mui-active" href="suoYouWenTi.html">
<span class="mui-icon mui-icon-help"><span class="mui-badge">9</span></span>
<span class="mui-tab-label">所有提问</span>
</a>
<a class="mui-tab-item " href="woDeWenTi.html">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">我的提问</span>
</a>
<a class="mui-tab-item" href="tiWen.html">
<span class="mui-icon mui-icon-compose"></span>
<span class="mui-tab-label">提问</span>
</a>
</nav>

js代码如下：

<script type="text/javascript" charset="utf-8">
//mui初始化
mui.init();
var subpages = ['suoYouWenTi.html', 'woDeWenTi.html', 'tiWen.html'];
var subpage_style = {
top: '0',
bottom: '50px'
};
var aniShow = {};
//创建子页面，首个选项卡页面显示，其它均隐藏；
mui.plusReady(function() {
var self = plus.webview.currentWebview();
for (var i = 0; i < 4; i++) {
var temp = {};
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
if (i > 0) {
sub.hide();
} else {
temp[subpages[i]] = "true";
mui.extend(aniShow, temp);
}
self.append(sub);
}
});

//当前激活选项
var activeTab = subpages[0];
var title = document.getElementById("title");

//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href');
if (targetTab == activeTab) {
return;
}
//显示目标选项卡
if (mui.os.ios || aniShow[targetTab]) {
plus.webview.show(targetTab);
} else {
var temp = {};
temp[targetTab] = "true";
mui.extend(aniShow, temp);
plus.webview.show(targetTab, "fade-in", 300);
}
//隐藏当前;
plus.webview.hide(activeTab);
//更改当前活跃的选项卡
activeTab = targetTab;
});
</script>

注释：底部添加红色角标：<span class="mui-badge">9</span>，若不想要图片只需要将图片删除即可

2.图标为图片格式

<nav class="mui-bar mui-bar-tab">
<a id="axx" class="mui-tab-item mui-show mui-active" href="html/yunYingGuanLi/yunYingGuanLi.html">
<div class="box">
<img id="img_axx" src="img/icon/index1.png"><br />
<span class="mui-tab-label">运营状况</span>
</div>
</a>
<a id="defaultTab" class="mui-tab-item mui-show" href="html/caiWuGuanLi/caiWuGuanLi.html">
<div class="box">
<img id="img_defaultTab" src="img/icon/cw_guanli.png">
<br />
<span class="mui-tab-label">经营状况</span>
</div>
</a>
<a id="abm" class="mui-tab-item" href="html/tongXunLu/tongXunLu.html">
<div class="box">
<img id="img_abm" src="img/icon/tongXunLu.png">
<br />
<span class="mui-tab-label txl">通讯录</span>
</div>
</a>
<a id="atxl" class="mui-tab-item mui-show" href="html/woDe/woDe.html">
<div class="box">
<img id="img_atxl" src="img/icon/woDe.png">
<br />
<span class="mui-tab-label">我的</span>
</div>
</a>
</nav>

CSS代码：

.mui-tab-item img{
width: 22px;
height: 22px;
margin-top: 3px;
}
#img_abm{
width: 23px;
height: 20px;
margin-top: 5px;
}
.mui-bar .box{
height: 50px;
background: #fff;
border-top: 1px solid #eee;
font-size: 12px;
}
.mui-tab-label{
display: block;
height: 20px;
line-height: 1;
}
.mui-bar-tab .mui-tab-item.mui-active {
color: #64a6fb;
}

JS代码：

//mui初始化
mui.init();
var showPage = 0; //底部页面切换
var subpages = ['html/yunYingGuanLi/yunYingGuanLi.html', 'html/tongXunLu/tongXunLu.html', 'html/woDe/woDe.html'];
if (localStorage["isRight"] == 'true') {
showPage = 4;
subpages = ['html/yunYingGuanLi/yunYingGuanLi.html', 'html/caiWuGuanLi/caiWuGuanLi.html',
'html/tongXunLu/tongXunLu.html', 'html/woDe/woDe.html'
];
Zepto("#defaultTab").show();
}
var subpage_style = {
top: '0',
bottom: '50px'
};
var aniShow = {};
//创建子页面，首个选项卡页面显示，其它均隐藏；
mui.plusReady(function() {
getProInfo();
document.addEventListener("resume", function() {
if (mui.os.android) {
getProInfo();
}
}, false);

var self = plus.webview.currentWebview();
showPage = 3;
for (var i = 0; i < showPage; i++) {
var temp = {};
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
if (i > 0) {
sub.hide();
} else {
temp[subpages[i]] = "true";
mui.extend(aniShow, temp);
}
self.append(sub);
}
//当前激活选项
var activeTab = subpages[0];
//选项卡点击事件
var enable = true;
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href'); //返回指定属性名的属性值
var id = this.getAttribute('id');
if (targetTab == activeTab) {
return;
}

changeImg(id);

//如果不存在则创建，否则直接显示
if (!plus.webview.getWebviewById(targetTab)) {
plus.webview.create(targetTab, targetTab, subpage_style);
}
//若为iOS平台或非首次显示，则直接显示
if (mui.os.ios || aniShow[targetTab]) {
plus.webview.show(targetTab);
} else {
//否则，使用fade-in动画，且保存变量
var temp = {};
temp[targetTab] = "true";
mui.extend(aniShow, temp);
plus.webview.show(targetTab, "fade-in", 300);
}
//隐藏当前;
plus.webview.hide(activeTab);
//更改当前活跃的选项卡
activeTab = targetTab;
});

//点击图片高亮
function changeImg(id) {
var idList = [
'img_axx',
'img_defaultTab',
'img_abm',
'img_atxl'
];
var imgList = [
'index',
'cw_guanli',
'tongXunLu',
'woDe'
];
var imgID = 'img_' + id;
for (var i = 0; i < idList.length; i++) {
if (idList[i] == imgID)
document.getElementById(idList[i]).src = 'img/icon/' + imgList[i] + '1.png';
else
document.getElementById(idList[i]).src = 'img/icon/' + imgList[i] + '.png';
}
}

});

function getProInfo() {

}

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！

mui 实现底部tab切换

相关文档推荐