MUI webview选项卡 首次只加载首页，点击触发打开页面

发表于 更新于 分类于 阅读次数： 本文字数： 519 阅读时长 ≈ 2 分钟

MUI 官方的 Demo 的加载 webview 选项卡的逻辑是一次创建全部的选项卡，只默认显示默认创建的页面，这个页面逻辑没必要这么复杂，扩展性也不强，修改一处多处要修改，我做了简单修改，直接修改数据源，就可以达到更改全部的效果。

直接上全部代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Main</title>
		<script type="text/javascript" src="../js/config.js"></script>
		<script type="text/javascript" src="../js/helper.js"></script>
		<script type="text/javascript" src="../js/common-head.js"></script>
		<link rel="stylesheet" href="../css/main.css">
	</head>

	<body>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item">
				<span class="mui-icon iconfont icon-zuanshi"></span>
				<span class="mui-tab-label"></span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon iconfont icon-8"></span>
				<span class="mui-tab-label"></span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon iconfont icon-zoushi"></span>
				<span class="mui-tab-label"></span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon iconfont icon-yonghuming"></span>
				<span class="mui-tab-label"></span>
			</a>
		</nav>
		<script type="text/javascript" charset="utf-8">
			//mui初始化
			mui.init();

			var subpage_style = {
				top: '0px',
				bottom: '60px'
			};

			var subPages = [{
					href: 'wonderfulRecommend.html',
					style: subpage_style,
					id: config.pageID.wonderfulRecommend,
					name: "精彩推荐"
				},
				{
					href: 'lotteryHall.html',
					style: subpage_style,
					id: config.pageID.lotteryHall,
					name: "购彩大厅"
				},
				{
					href: 'drawTrend-pullRefresh.html',
					style: subpage_style,
					id: config.pageID.drawTrend_pullRefresh,
					name: "开奖走势"
				},
				{
					href: 'myLottery.html',
					style: subpage_style,
					id: config.pageID.myLottery,
					name: "我的彩票"
				}
			]
			// 默认显示页面
			var defaultPageIndex = 0;
			mui.ready(function() {
				// 动态添加 href 和名称
				var tabBarItems = document.getElementsByClassName('mui-tab-item');
				for(var i = 0; i < tabBarItems.length; i++) {
					var tabBarItem = tabBarItems[i];
					// 设置目标页面
					tabBarItem.setAttribute('href', subPages[i].href);
					// 设置索引
					tabBarItem.setAttribute('index', i);
					// 设置文字标题
					var tab_item_label = tabBarItem.querySelector('.mui-tab-label');
					tab_item_label.innerHTML = subPages[i].name;
					// 默认激活的 mui-tab-item
					if(i == defaultPageIndex) {
						tabBarItem.classList.add('mui-active');
					}
				}
			})
			
			//创建子页面，首个选项卡页面显示，其它均隐藏；
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				var defaultPage = plus.webview.create(subPages[defaultPageIndex].href, subPages[defaultPageIndex].id, subPages[defaultPageIndex].style);
				self.append(defaultPage);
			});
			var activeTab = subPages[defaultPageIndex].id;
			mui('.mui-bar-tab').on('tap', 'a', function(e) {
				var targetTab = this.getAttribute('href');

				if(targetTab == activeTab) {
					return;
				}
				var index = this.getAttribute('index');
				log(index);
				// 先获取
				var destPage = plus.webview.getWebviewById(subPages[index].id);
				if(destPage) {
					destPage.show();
				} else {
					var self = plus.webview.currentWebview();
					var sub = plus.webview.create(targetTab, subPages[index].id, subPages[index].style);
					self.append(sub);
				}
				//隐藏当前;  
				plus.webview.hide(activeTab); //这里应该是关闭页面，不知道隐藏与关闭区别有多大  
				//更改当前活跃的选项卡  
				activeTab = targetTab;
			});
		</script>
	</body>

</html>