MUI底部導航切換子頁面
阿新 • • 發佈:2018-11-24
reat document pen enter 標題 htm ttr active fun
1.登陸頁面進入之後,進入到main頁面,main頁面只有一個底部導航,然後引入子頁面進行渲染。
<nav class="mui-bar mui-bar-tab" id="tabbar"> <a class="mui-tab-item mui-active" href="html/applyy.html" id="apply"> <span class="mui-icon apply"></span> <span class="mui-tab-label ">申請</span> </a> <a class="mui-tab-item" href="html/getmedicine.html" id="getmedicine"> <span class="mui-icon getmedicine"></span> <span class="mui-tab-label ">領藥</span> </a> <a class="mui-tab-item" href="html/me.html" id="me"> <span class="mui-icon me"></span> <span class="mui-tab-label">我的</span> </a> </nav>
2.css部分,點擊高亮切換圖片。
#mui-bar { height: 1rem!important; border-top: 0.8rem; } .mui-tab-item { text-align: center; } .mui-icon { margin-left: 0.1rem; width: 0.5rem!important; height: 0.5rem!important; } .mui-tab-label { color: #999999; font-size:13px!important; } .mui-active .mui-tab-label { color: #00cec5; font-size:13px!important; } .apply { background: url(images/index/apply.png)0 0.02rem no-repeat; background-size: 0.4rem 0.45rem; } .mui-active .apply { background: url(images/index/applyactive.png)0 0.02rem no-repeat; background-size: 0.4rem 0.45rem; } .getmedicine { background: url(images/index/get.png)0 0.02rem no-repeat; background-size: 0.4rem 0.45rem; } .mui-active .getmedicine { background: url(images/index/getactive.png)0 0.02rem no-repeat; background-size: 0.4rem 0.45rem; } .me { background: url(images/index/me.png)0 0.02rem no-repeat; background-size: 0.4rem 0.45rem; } .mui-active .me { background: url(images/index/meactive.png)0 0.02rem no-repeat; background-size: 0.4rem 0.45rem; }
3,js部分
// 初始化mui.init()寫在這裏 mui.init(); //設置默認打開首頁顯示的子頁序號; var Index = 0; //把子頁的路徑寫在數組裏面 var subpages = [‘html/applyy.html‘, ‘html/getmedicine.html‘, ‘html/me.html‘]; //把子頁的路徑寫在數組裏面 //所有的plus-*方法寫在mui.plusReady中或者後面。 mui.plusReady(function() { //獲取當前頁面所屬的Webview窗口對象 var self = plus.webview.currentWebview(); for(var i = 0; i < 3; i++) { //創建webview子頁 var sub = plus.webview.create( subpages[i], //子頁url subpages[i], //子頁id { top: ‘0‘, //設置距離頂部的距離 bottom: ‘50px‘ //設置距離底部的距離 } ); //如不是我們設置的默認的子頁則隱藏,否則添加到窗口中 if(i != Index) { sub.hide(); } //將webview對象填充到窗口 self.append(sub); } }); //當前激活選項 var activeTab = subpages[Index], title = document.querySelector(".mui-title"); //選項卡點擊事件 mui(‘.mui-bar-tab‘).on(‘tap‘, ‘a‘, function(e) { //獲取目標子頁的id var targetTab = this.getAttribute(‘href‘); if(targetTab == activeTab) { return; } //更換標題 // h1.innerHTML = this.querySelector(‘.mui-tab-label‘).innerHTML; //顯示目標選項卡 plus.webview.show(targetTab); //隱藏當前選項卡 plus.webview.hide(activeTab); //更改當前活躍的選項卡 activeTab = targetTab; }); //自定義事件,模擬點擊“首頁選項卡” //申請頁面 window.addEventListener(‘apply‘, function() { location.reload(); var apply= document.getElementById("apply"); //模擬首頁點擊 mui.trigger(apply, ‘tap‘); //切換選項卡高亮 var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active"); if(apply!== current) { current.classList.remove(‘mui-active‘); apply.classList.add(‘mui-active‘); } }); //領藥頁面 document.addEventListener(‘getmedicine‘, function() { var getmedicine = document.getElementById("getmedicine"); //模擬首頁點擊 mui.trigger(getmedicine, ‘tap‘); //切換選項卡高亮 var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active"); if(getmedicine !== current) { current.classList.remove(‘mui-active‘); getmedicine.classList.add(‘mui-active‘); } }); //我的頁面 document.addEventListener(‘me‘, function() { location.reload(); var me= document.getElementById("me"); //模擬首頁點擊 mui.trigger(me, ‘tap‘); //切換選項卡高亮 var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active"); if(me !== current) { current.classList.remove(‘mui-active‘); me.classList.add(‘mui-active‘); } });
4.子頁面需要調用的。
//領藥結束跳轉頁面 $("#end").click(function(){ mui.fire(plus.webview.currentWebview().opener(),"apply"); })
MUI底部導航切換子頁面