基於HBuilder開發手機APP-主頁/跳轉頁面/切換選項卡

  前  言

手機APP

　前端語言的學習，順帶着學習製做手機APP，在這裏跟你們分享一下，個人第一個手機APP，它的名字叫作你好，明天。 本APP是臨摹手機上的QQ閱讀製做，能夠登陸，查看小說一些簡單的設計，因爲剛接觸許多東西須要慢慢的熟悉、完善，不足之處請各位見諒。

開篇

　　下載HBuilder在這裏就不作太多闡述，直接進入主題。

1 創建新項目-手機APP

先來一個效果圖鎮樓：

 

 

 

 

當你新建完成以後會出現新的項目，建立的時候選擇mui項目，裏面會內帶一些CSS與JS方便編寫內容。

具體內容和主頁以下圖：

 

 

 

 

2 創建底部選項卡

在相應位置改變你須要改變的內容效果圖以下：

 

 

3 創建所須要的子頁

 

所須要的子頁一一對應，寫入數組，在javascript裏 mui.plusReady寫入手機端的準備要求，內部寫入函數:

在這裏我使用的是預加載:plus.webview.create(objYe[i],objYe[i],objStyle);

因爲使用的是自加載函數因此頁面開始時直接預加載四個頁面，初始時默認效果經過：mui.trigger(arr[0],"tap");實現默認第一個選項卡默認點擊效果。

每一個選項卡被點擊的時候其餘選項卡內容顯示跟自身對應的子頁webview顯示，其餘隱藏：根據自加載函數裏面的for循環實施。這樣就達到了一個跳轉頁面的效果。

 

 

<script type="text/javascript">
		mui.init()
		mui.plusReady(function(){
			var arr =document.getElementsByClassName("mui-tab-item");
			var objYe = ["main.html","second.html","third.html","fourth.html"];
			var objStyle = {
				 top:"0px",
      	  bottom:"51px",
			};
			var objs=[];
			var self = plus.webview.currentWebview();//取到當前的主頁窗口
			for (var i=0;i<arr.length;i++){
			!function(i){
			var obj = plus.webview.create(objYe[i],objYe[i],objStyle);
			 objs.push(obj);
			
			 arr[i].addEventListener("tap",function(){
			 	for(var j=0;j<arr.length;j++){
					if(j!=i){objs[j].hide()}
					else{objs[j].show()}
			 	}
			 	self.append(objs[i])
			 })
			 }(i)
			}
			 mui.trigger(arr[0],"tap"); 
			})
			
		</script>

 

 

 

4 效果圖