mui底部选项卡切换页面
参照官网窗口管理：http://dev.dcloud.net.cn/mui/window/
mui.init({ subpages:[{ url:your-subpage-url,//子页面HTML地址，支持本地地址和网络地址 id:your-subpage-id,//子页面标志 styles:{ top:subpage-top-position,//子页面顶部位置 bottom:subpage-bottom-position,//子页面底部位置 width:subpage-width,//子页面宽度，默认为100% height:subpage-height,//子页面高度，默认为100% ...... }, extras:{}//额外扩展参数 }] });
创建代码比较简单，如下：
mui.init({ subpages:[{ url:'list.html', id:'list.html', styles:{ top:'45px',//mui标题栏默认高度为45px； bottom:'0px'//默认为0px，可不定义； } }] });
其他子页面的新建：选含mui的html，body里写展示内容
底部选项卡切换(WebView模式)：
demo1：
<!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> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">标题</h1> </header> <nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active" href="head.html"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首页</span> </a> <a class="mui-tab-item" href="tel.html"> <span class="mui-icon mui-icon-phone"></span> <span class="mui-tab-label">电话</span> </a> <a class="mui-tab-item" href="email.html"> <span class="mui-icon mui-icon-email"></span> <span class="mui-tab-label">邮件</span> </a> <a class="mui-tab-item" href="set.html"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">设置</span> </a> </nav> <script src="js/mui.min.js"></script> <script type="text/javascript"> var subpage = [head.html, tel.html,email.html, set.html];//页面存入数组 var styles = { top: 50 px, bottom: 51 px } min.plusReady(function() { var hash = plus.webview.currentWebview(); //获取当前窗口 for(var i = 0; i < hash.length; i++) { //plus.webview.create(url, id, style); var Newpage = plus.webview.create(subpage[i], subpage[i], styles);//创建子页面 if(i > 0) { Newpage.hide();//其他页面隐藏 } hash.append(Newpage);//当前home页显示 } }); //点击事件a var cativeTab = subpage[0];//默认第一页显示 //mui('选择器父级').on('tap', '选择器子级', functioin() {}); mui('.mui-bar').on('tap', 'a', functioin() { var targetTab = this.getAttribute('href');//获取属性 href值 if(targetTab == cativeTab) { return; } plus.webview.hide(cativeTab); cativeTab = targetTab;//值赋 plus.webview.show(targetTab); }) </script> </body> </html>
底部选项卡切换(DIV模式)：
<header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">底部选项卡切换(Div模式)</h1> </header> <nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active" href="#page1"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首页</span> </a> <a class="mui-tab-item" href="#page2"> <span class="mui-icon mui-icon-phone"></span> <span class="mui-tab-label">电话</span> </a> <a class="mui-tab-item" href="#page3"> <span class="mui-icon mui-icon-email"></span> <span class="mui-tab-label">邮件</span> </a> <a class="mui-tab-item" href="#page4"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">设置</span> </a> </nav> <div class="mui-content"> <div id="page1" class="mui-control-content mui-active"> 这是第一个页面 </div> <div id="page2" class="mui-control-content"> 这是第二个页面 </div> <div id="page3" class="mui-control-content"> 这是第三个页面 </div> <div id="page4" class="mui-control-content"> 这是第四个页面 </div> </div>
