HTML5 開發APP(頭部和底部選項卡)
我們開發app有一定固定的樣式，比如頭部和底部選項卡部分就是公共部分就比如我在做的app進來的主頁面就像圖片顯示的那樣
我們該怎麽實現呢，實現我們應該建一個主頁面index.html，然後建五個子頁面，通過mui來實現切換功能。
在index的html部分寫下這樣的代碼
<body>
<header class="mui-bar mui-bar-nav" style="padding-right: 15px;background: #00be68;">
<h1 class="mui-title" style="color: #FFFFFF;">俺的菜園子</h1>
</header>
<nav class="mui-bar mui-bar-tab" href="houye.html">
<a id="defaultTab" class="mui-tab-item" href="game.html">
<span class="mui-icon iconfont icon-gamebar"></span>
<span class="mui-tab-label">我的菜園</span>
</a>
<a class="mui-tab-item" href="nongfuZhuanqu.html">
<span class="mui-icon iconfont icon-special1"></span>
<span class="mui-tab-label">農夫專區</span>
</a>
<a class="mui-tab-item" href="caiYuanShangCheng.html">
<span class="mui-icon iconfont icon-iconfonticonfonticonfont20"></span>
<span class="mui-tab-label">菜園 集市</span>
</a>
<a class="mui-tab-item" href="shopList.html">
<span class="mui-icon iconfont icon-shangcheng"></span>
<span class="mui-tab-label">購物清單</span>
</a>
<a class="mui-tab-item" href="geRenZhongXin.html">
<span class="mui-icon iconfont icon-geren"></span>
<span class="mui-tab-label">個人中心</span>
</a>
</nav>
</body>
heard是頭部樣式，nav是底部樣式很明顯，註意的是關於圖標的問題，通過<span class="mui-icon iconfont icon-shangcheng"></span>加入圖標但是mui自帶的圖標很少是不能滿足我們的需要的，我們去官網http://dev.dcloud.net.cn/mui/ui/#icon可以看到
點開教程根據教程可以很容易的實現拓展圖標的功能，簡單的說一下教程，就是選擇自己要用的圖標，下載到本地然後將對應的css和font文件導入到css和font中去就可以使用它生成的圖標了。js 部分寫如下代碼
var Index=0;
//把子頁的路徑寫在數組裏面
var subpages = [‘game.html‘,‘nongfuZhuanqu.html‘,‘caiYuanShangCheng.html‘,‘shopList.html‘,‘geRenZhongXin.html‘];
//所有的plus-*方法寫在mui.plusReady中或者後面。
mui.plusReady(function() {
//獲取當前頁面所屬的Webview窗口對象
var self = plus.webview.currentWebview();
for (var i = 0; i < 5; i++) {
//創建webview子頁
var sub = plus.webview.create(
subpages[i], //子頁url
subpages[i], //子頁id
{
top: ‘44px‘,//設置距離頂部的距離
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;
}
//更換標題
title.innerHTML = this.querySelector(‘.mui-tab-label‘).innerHTML;
//顯示目標選項卡
//plus.webview.getWebviewById(targetTab).reload();
plus.webview.show(targetTab);
//隱藏當前選項卡
plus.webview.hide(activeTab);
//更改當前活躍的選項卡
activeTab = targetTab;
});
window.addEventListener(‘refresh‘, function(e){//執行刷新
location.reload();
});
對應字頁面分別下
subpages數組寫的是五個子頁面的路徑。其他都有註釋。我們要註意打開頁面的位置，和點擊事件是tap而不是我們常用的click。另外父頁面和子頁面都要是新建為含有mui的html頁面。這樣就寫好了一個頭部和底部選項卡了，將子頁面的內容分別寫在5個字頁面中，通過點擊底部選項卡就可以切換了。
下一章我會講一下關於mui和我們平時寫前端頁面的不同的地方
HTML5 開發APP(頭部和底部選項卡)