MUI底部頁籤實作頁面切換

在用mui設計app總體架構時，基本需要實作點選底部頁籤切換頁面的功能，在官方demo中對底部頁籤有幾種選擇，但是将demo複制過來時頁面切換的效果并沒有成功實作。本篇文章在demo的基礎上進行修改，實作該效果。

1. 定義一個subpages數組存放子頁面id，設定子頁面樣式

var subpages = ['html/people.html', 'html/key.html', 'html/lock.html', 'html/signment.html', 'html/log.html'];
var subpage_style = {
				top: '0px',
				bottom: '51px'
			};
           

1. 建立子頁面，顯示首個頁籤頁面，其餘頁面均隐藏

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";
						self.append(sub);
					}
				}
			});
           

定義self來擷取目前頁面，從之前定義的數組中循環，選取第一個頁面進行展示，其餘頁面利用hide()函數隐藏

1. 激活目前選項

//目前激活選項
			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);
				}
				//隐藏目前;
				plus.webview.hide(activeTab);
				//更改目前活躍的頁籤
				activeTab = targetTab;
			});
           

1. 頁籤高亮顯示

//自定義事件，模拟點選“首頁頁籤”
			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');
				}
			});