HTML5 開發APP(頭部和底部選項卡)
咱們開發app有必定固定的樣式，好比頭部和底部選項卡部分就是公共部分就好比我在作的app進來的主頁面就像圖片顯示的那樣css
咱們該怎麼實現呢，實現咱們應該建一個主頁面index.html，而後建五個子頁面，經過mui來實現切換功能。html
在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>web
</body>數組
heard是頭部樣式，nav是底部樣式很明顯，注意的是關於圖標的問題，經過<span class="mui-icon iconfont icon-shangcheng"></span>加入圖標可是mui自帶的圖標不多是不能知足咱們的須要的，咱們去官網http://dev.dcloud.net.cn/mui/ui/#icon能夠看到app
點開教程根據教程能夠很容易的實現拓展圖標的功能，簡單的說一下教程，就是選擇本身要用的圖標，下載到本地而後將對應的css和font文件導入到css和font中去就可使用它生成的圖標了。js 部分寫以下代碼ide
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();
});ui
對應字頁面分別下this
subpages數組寫的是五個子頁面的路徑。其餘都有註釋。咱們要注意打開頁面的位置，和點擊事件是tap而不是咱們經常使用的click。另外父頁面和子頁面都要是新建爲含有mui的html頁面。這樣就寫好了一個頭部和底部選項卡了，將子頁面的內容分別寫在5個字頁面中，經過點擊底部選項卡就能夠切換了。url
下一章我會講一下關於mui和咱們平時寫前端頁面的不一樣的地方
- 1. mui底部選項卡切換頁面
- 2. TabLayoutBottomDemo【TabLayout實現底部選項卡】
- 3. Android仿微信底部選項卡
- 4. mui APP tab選項卡底部凸出圖標解決實例
- 5. MUI框架開發HTML5手機APP(二)--頁面跳轉傳值&底部選項卡切換
- 6. tcp頭部選項
- 7. touchapp1--固定頭部和底部
- 8. RecyclerView添加頭部和底部
- 9. BootstrapTable固定頭和底部
- 10. [deviceone開發]-底部彈出選擇
- 更多相關文章...
- • ionic 頭部和底部 - ionic 教程
- • ionic 頭部與底部 - ionic 教程
- • PHP開發工具
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
-
每一个你不满意的现在，都有一个你没有努力的曾经。