mui是前端框架可是不少人用它寫移動端 那麼mui底部切換是怎麼作到的呢?html
如何點擊某個tab來切換不一樣的頁面?前端
解答:web
1首先咱們須要引入mui框架的底部tab元素 代碼以下前端框架
<!--table菜單開始-->
<nav class="mui-bar mui-bar-tab">
<a href="index.html" class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首頁</span>
</a>
<a href="hotspot.html" class="mui-tab-item">
<span class="mui-icon mui-icon-paperplane"></span>
<span class="mui-tab-label">熱點</span>
</a>
<a href="message.html" class="mui-tab-item">
<span class="mui-icon mui-icon-chat"></span>
<span class="mui-tab-label">消息</span>
</a>
<a href="center.html" class="mui-tab-item" >
<span class="mui-icon mui-icon-person"></span>
<span class="mui-tab-label">個人</span>
</a>
</nav>app
<!--table菜單結束-->框架
注意:每一個a標籤都要寫目標路徑的位置ide
接着就是js文件了函數
//mui加載框架元素成功以後執行此函數ui
mui.plusReady(function(){
//四個頁面的路徑依次順序排列
var subpages=['index.html','hotspot.html','message.html','center.html'];
//除了主頁面其他頁面的樣式
var subpage_style={
top:'0px',
bottom:'51px'
}
//主頁面樣式 底部不須要漏出來
var index_style={
top:'0px',
bottom:'0px'
}
//獲取當前第一個頁面
var activeTab=subpages[0];
//給底部table 選項卡添加單機監聽事件
mui('.mui-bar-tab').on('tap','a',function(e){
//獲取目標路徑
var targetTab=this.getAttribute("href");
//若是當前地址是index.html目標地址也是index.html
if(targetTab==activeTab){
return ;
}
//獲取當前窗口對象
var self=plus.webview.currentWebview();
//若是是第一個頁面那麼選擇 第一個頁面的樣式 第一個頁面底部有選項卡
if(targetTab==subpages[0]){
//主頁面 index_style
var sub=plus.webview.create(targetTab,targetTab,index_style);
}else{
//主頁面 其他頁面的樣式 subpage_style
var sub=plus.webview.create(targetTab,targetTab,subpage_style);
}
//把子頁面添加到當前窗口對象裏
self.append(sub);
//關閉當前窗口裏面已經展現的頁面
plus.webview.hide(activeTab);
//要打開的頁面賦值給當前頁面留着下次使用
activeTab=targetTab;
})
this
}
這樣就能夠作到來回切換底部選項卡了