码云SVN仓库地址：https://gitee.com/lim2018/vx/tree/master
MUI项目基础框架，底部导航栏切换
目录结构
index为入口页主体，sub1-4为要切换的子页面
index页代码：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet" /> <style> /**头部标题栏**/ .mui-bar-nav { background: #000000; } .mui-title { color: #FFFFFF; } /**导航图标颜色**/ .mui-bar-tab .mui-tab-item.mui-active { color: #4cd964; } </style> </head> <body> <!-- 作者：2184291781@qq.com 时间：2019-01-06 描述：头部 --> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">微信</h1> </header> <!--主体为子页面--> <!-- 作者：2184291781@qq.com 时间：2019-01-06 描述：底部导航 --> <nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active mui-tab-href" href="sub1.html"> <span class="mui-icon mui-icon-chatbubble"></span> <span class="mui-tab-label">微信</span> </a> <a class="mui-tab-item mui-tab-href" href="sub2.html"> <span class="mui-icon mui-icon-bars"></span> <span class="mui-tab-label">通讯录</span> </a> <a class="mui-tab-item mui-tab-href" href="sub3.html"> <span class="mui-icon mui-icon-navigate"></span> <span class="mui-tab-label">发现</span> </a> <a class="mui-tab-item mui-tab-href" href="sub4.html"> <span class="mui-icon mui-icon-person"></span> <span class="mui-tab-label">我</span> </a> </nav> </body> <script type="text/javascript" charset="utf-8"> //mui初始化 mui.init(); //mui加载完成 mui.plusReady(function() { //定义子页面数组 var subPages=[]; //取href所在的dom对象 var href=document.getElementsByClassName("mui-tab-href"); for(var i=0;i<href.length;i++){ //把每个导航页对应的href放入数组 subPages[i]=href[i].getAttribute("href"); } //定义主页面的样式,主要是大小位置 var subPageStyle = { top: "44px", //子页面距离顶部高度 bottom: "50px" //子页面距离底部距离 }; //获取主的webview var mainView = plus.webview.currentWebview(); //遍历数组，根据每个url创建webviwe for(var i = 0; i < subPages.length; i++) { //括号内参数分别为 url id style var subView = plus.webview.create(subPages[i], subPages[i], subPageStyle); //把子webviwe追加到主的webviwe中 子webviwe默认隐藏 mainView.append(subView); } //然后要第一个子webview显示出来 也就是导航微信那页 //补充：index这页是入口页 默认打开APP时候就是显示webview中,所以不用另外加入webview中 plus.webview.show(subPages[0]); //给每个导航图标注册单击事件 mui(".mui-bar-tab").on("tap","a",function(){ //设置当前点击的导航图标对应的子页面的webview显示,根据指定的id设置 //id在a标签的href内 取里面的值就行 var id=this.getAttribute("href"); plus.webview.show(id); }) }) </script></html>
子页面sub1代码 其他页类似
<!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" /> </head> <body> <!-- 作者：2184291781@qq.com 时间：2019-01-06 描述：主体 --> <div class="mui-content"> <h1>微信</h1> </div> </body> <script src="js/mui.min.js"></script> <script type="text/javascript"> mui.init() </script></html>
还没有人抢沙发呢~