mui实现底部导航栏

话不多说，先来看看实现的效果。

实现效果

点击哪个选项卡，对应的选项卡就激活，其余的变为未激活状态，并且切换到对应的页面。

实现代码

mui的底部标签栏代码，可以自定义选项卡的图标和文字。

js控制页面切换，把底部选项卡对应的页面都配置在自己需要的地方，这里都放在了html文件夹下

mui.init();mui.plusReady(function(){var pages = ["html/index.html","html/discovery.html","html/study.html","html/activity.html","html/me.html"];var arr = document.getElementsByClassName("mui-tab-item")var styles = {top:"82px",//修改subview的显示范围bottom:"53px"}var pageArr = [];var slef = plus.webview.currentWebview();var icon=document.getElementById("study_icon");for(var i=0; i<arr.length; i++){// 有几个选项卡，需要创建几个子页面var page = plus.webview.create(pages[i],pages[i],styles);pageArr.push(page);!function(i){arr[i].addEventListener("tap",function(){// 让当前页面(i)显示，不是当前页面隐藏for(var j=0; j<pageArr.length; j++){if(j!=i) pageArr[j].hide();else pageArr[j].show();}/* 让新创建的webview，追加合并到当前的窗口上。合并成一个窗口。* 目的：将父子窗口合并成一个页面，实现同开同关的效果。避免点击返回安监室，子页面先关闭，而父页面的头部和尾部没有关闭的BUG。*/slef.append(pageArr[i]);//根据页面来改变study图标if(i==2){icon.src="images/study.png";}else{icon.src="images/study-grey.png";}//根据页面来变化headerif(i==3){normal.style.display="none";discovery.style.display="block";me.style.display="none";}else if(i==4){normal.style.display="none";discovery.style.display="none";me.style.display="block";}else{normal.style.display="block";discovery.style.display="none";me.style.display="none";}})}(i);}// 默认触发第0个选项卡的tap事件。mui.trigger(arr[0],"tap");});

css代码，控制底部选项卡样式

.mui-bar-tab .mui-tab-item.mui-active {/*底部菜单栏点击颜色*/color: #39d5e3;}body{/*调节底部菜单栏图标位置*/line-height: 19px;}.mui-bar {/*底部菜单栏和顶部栏颜色*/position: fixed;z-index: 10;right: 0;left: 0;height: 82px;/*修改上下导航栏的高度，但是实际显示的部分是没有被sunview遮住的部分*/padding-right: 10px;padding-left: 10px;border-bottom: 0;background-color: #ffffff;-webkit-box-shadow: 0 0 1px rgba(0,0,0,.85);box-shadow: 0 0 0px rgba(0,0,0,.85);-webkit-backface-visibility: hidden;backface-visibility: hidden;}

完整代码

<!doctype html><html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.min.css" rel="stylesheet" /><link href="css/comment.css" rel="stylesheet" /><link rel="stylesheet" type="text/css" href="css/iconfont.css"/><style type="text/css">.mui-bar-tab .mui-tab-item.mui-active {/*底部菜单栏点击颜色*/color: #39d5e3;}body{/*调节底部菜单栏图标位置*/line-height: 19px;}.mui-bar {/*底部菜单栏和顶部栏颜色*/position: fixed;z-index: 10;right: 0;left: 0;height: 82px;/*修改上下导航栏的高度，但是实际显示的部分是没有被sunview遮住的部分*/padding-right: 10px;padding-left: 10px;border-bottom: 0;background-color: #ffffff;-webkit-box-shadow: 0 0 1px rgba(0,0,0,.85);box-shadow: 0 0 0px rgba(0,0,0,.85);-webkit-backface-visibility: hidden;backface-visibility: hidden;}</style></head><body><nav class="mui-bar mui-bar-tab" style="height:53px;"><a class="mui-tab-item mui-active"><span class="mui-icon iconfont icon-iconindexsel" style="font-size:32px;margin-left: -9px;"></span><span class="mui-tab-label" style="font-size:10px;margin-bottom: 1px;">首页</span></a><a class="mui-tab-item"><span class="mui-icon iconfont icon-compass-discover-fill" style="font-size:32px;margin-left: -9px;"></span><span class="mui-tab-label" style="font-size:10px;margin-bottom: 1px;">发现</span></a><a class="mui-tab-item"><img id="study_icon" src="images/study-grey.png" width="40px"></a><a class="mui-tab-item"><span class="mui-icon iconfont icon-discoveryfill" style="font-size:30px;margin-left: -6px;"></span><span class="mui-tab-label" style="font-size:10px;margin-bottom: 1px;">活动</span></a><a class="mui-tab-item"><span class="mui-icon iconfont icon-muying" style="font-size:32px;margin-left: -7px;"></span><span class="mui-tab-label" style="font-size:10px;margin-bottom: 1px;">我的</span></a></nav><script src="js/mui.min.js"></script><script type="text/javascript">mui.init();mui.plusReady(function(){var pages = ["html/index.html","html/discovery.html","html/study.html","html/activity.html","html/me.html"];var arr = document.getElementsByClassName("mui-tab-item")var styles = {top:"82px",//修改subview的显示范围bottom:"53px"}var pageArr = [];var slef = plus.webview.currentWebview();var icon=document.getElementById("study_icon");for(var i=0; i<arr.length; i++){// 有几个选项卡，需要创建几个子页面var page = plus.webview.create(pages[i],pages[i],styles);pageArr.push(page);!function(i){arr[i].addEventListener("tap",function(){// 让当前页面(i)显示，不是当前页面隐藏for(var j=0; j<pageArr.length; j++){if(j!=i) pageArr[j].hide();else pageArr[j].show();}/* 让新创建的webview，追加合并到当前的窗口上。合并成一个窗口。* 目的：将父子窗口合并成一个页面，实现同开同关的效果。避免点击返回安监室，子页面先关闭，而父页面的头部和尾部没有关闭的BUG。*/slef.append(pageArr[i]);//根据页面来改变study图标if(i==2){icon.src="images/study.png";}else{icon.src="images/study-grey.png";}//根据页面来变化headerif(i==3){normal.style.display="none";discovery.style.display="block";me.style.display="none";}else if(i==4){normal.style.display="none";discovery.style.display="none";me.style.display="block";}else{normal.style.display="block";discovery.style.display="none";me.style.display="none";}})}(i);}// 默认触发第0个选项卡的tap事件。mui.trigger(arr[0],"tap");});</script></body></html>