add bottom navigation

taoyimin · May 5, 2019 · 6cd6c46 · 6cd6c46
1 parent 83c20c8
commit 6cd6c46
Showing 1 changed file with 130 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -1,16 +1,133 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
-    <title></title>
-    <script src="js/mui.min.js"></script>
-    <link href="css/mui.min.css" rel="stylesheet"/>
-    <script type="text/javascript" charset="utf-8">
-      	mui.init();
-    </script>
-</head>
-<body>
-
-</body>
+
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
+		<title></title>
+		<script src="js/mui.min.js"></script>
+		<script type="text/javascript" src="js/vue.min.js" ></script>
+		<link href="css/mui.min.css" rel="stylesheet" />
+		<script type="text/javascript" charset="utf-8">
+			mui.init();
+		</script>
+	</head>
+
+	<body id='html_body'>
+		<header class="mui-bar mui-bar-nav" style="background-color: #2cc971;">
+			<h1 class="mui-title" style="color: #FFFFFF;" id="title">首页</h1>
+		</header>
+		<nav class="mui-bar mui-bar-tab" id="bottom_tab">
+			<a class="mui-tab-item mui-active" :href="subpages[0]">
+				<span class="mui-icon mui-icon-home"></span>
+				<span class="mui-tab-label">首页</span>
+			</a>
+			<a class="mui-tab-item" :href="subpages[1]">
+				<span class="mui-icon mui-icon-email"></span>
+				<span class="mui-tab-label">消息</span>
+			</a>
+			<a class="mui-tab-item" :href="subpages[2]">
+				<span class="mui-icon mui-icon-gear"></span>
+				<span class="mui-tab-label">我的</span>
+			</a>
+		</nav>
+	</body>
+	<script>
+		var subpages = ['views/main/main.html', 'views/message/message_list.html', 'views/mine/mine.html'];
+		//mui初始化
+		mui.init();
+
+		var subpage_style = {
+			top: '44px',
+			bottom: '51px'
+		};
+
+		var aniShow = {};
+
+		var vm = new Vue({
+				el: '#bottom_tab',
+				data: {
+					currentIndex: 0,
+					subpages: subpages
+				}
+		});
+
+		//创建子页面，首个选项卡页面显示，其它均隐藏；
+		mui.plusReady(function() {
+			var self = plus.webview.currentWebview();
+			for(var i = 0; i < subpages.length; i++) {
+				var temp = {};
+				var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
+				if(i > 0) {
+					sub.hide();
+				} else {
+					temp[subpages[i]] = "true";
+					mui.extend(aniShow, temp);
+				}
+				self.append(sub);
+			};
+			//改变状态栏颜色
+			plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
+			plus.navigator.setStatusBarBackground('#2cc971'); //设置状态栏的颜色
+		});
+
+		var first = null;
+		mui.back = function() {
+			if(!first) {
+				first = new Date().getTime();
+				mui.toast('再按一次退出系统!');
+				setTimeout(function() {
+					first = null;
+				}, 2000);
+			} else {
+				if(new Date().getTime() - first < 2000) {
+					plus.runtime.quit();
+				}
+			}
+		};
+		//当前激活选项
+		var activeTab = subpages[0];
+		var title = document.getElementById("title");
+		//选项卡点击事件
+		mui('.mui-bar-tab').on('tap', 'a', function(e) {
+			var targetTab = this.getAttribute('href');
+			if(targetTab == activeTab) {
+				return;
+			}
+			//更换标题
+			title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
+			//显示目标选项卡
+			//若为iOS平台或非首次显示，则直接显示
+			if(mui.os.ios || aniShow[targetTab]) {
+				plus.webview.show(targetTab);
+			} else {
+				//否则，使用fade-in动画，且保存变量
+				var temp = {};
+				temp[targetTab] = "true";
+				mui.extend(aniShow, temp);
+				plus.webview.show(targetTab, "fade-in", 300);
+			}
+
+			mui.fire(plus.webview.getWebviewById(activeTab), "unSelected", null);
+
+			//隐藏当前;
+			plus.webview.hide(activeTab);
+			//更改当前活跃的选项卡
+			activeTab = targetTab;
+			mui.fire(plus.webview.getWebviewById(activeTab), "selected", null);
+		});
+		//自定义事件，模拟点击“首页选项卡”
+		document.addEventListener('gohome', function() {
+			var defaultTab = document.getElementById("defaultTab");
+			//模拟首页点击
+			mui.trigger(defaultTab, 'tap');
+			//切换选项卡高亮
+			var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
+			if(defaultTab !== current) {
+				current.classList.remove('mui-active');
+				defaultTab.classList.add('mui-active');
+			}
+		});
+	</script>
+
 </html>