標籤：dex bar 實現 不同的 self cloud read 注釋 父頁面
我們開發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(頭部和底部選項卡)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
