MUI 底部导航栏webview模式按需加载

<!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>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/icons-extra.css" rel="stylesheet" />
		<style>
			body {
				background: white;
			}
			
			.mui-bar-tab .mui-tab-item.mui-active {
				color: #E02D26;
			}
		</style>
	</head>
	<body>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" data-id="tap-botton-1.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" data-id="tap-botton-2.html">
				<span class="mui-icon mui-icon-extra mui-icon-extra-new"></span>
				<span class="mui-tab-label">新品</span>
			</a>
			<a class="mui-tab-item" data-id="tap-botton-3.html">
				<span class="mui-icon mui-icon-search"></span>
				<span class="mui-tab-label">搜索</span>
			</a>
			<a class="mui-tab-item" data-id="tap-botton-4.html">
				<span class="mui-icon mui-icon-chat"></span>
				<span class="mui-tab-label">聊天</span>
			</a>
			<a class="mui-tab-item" data-id="tap-botton-5.html">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">个人中心</span>
			</a>
		</nav>

		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init();
			var subpage_style = {
				top: '0px',
				bottom: '51px',
				render: 'always'
			};
			var self = null;
			var activeTab = null; 
			mui.plusReady(function() {
				//关闭右滑返回
				plus.webview.currentWebview().setStyle({
					'popGesture': 'none'
				});
				self = plus.webview.currentWebview();
				var sub = plus.webview.create("tab-botton-subpage/tap-botton-1.html", "tap-botton-1.html", subpage_style);
				self.append(sub);
				activeTab = "tap-botton-1.html";

				//选择底部菜单
				mui('.mui-bar-tab').on('tap', 'a', function(e) {
					var targetTab = this.getAttribute('data-id');
					if(targetTab == activeTab) {
						return;
					}
					var _subWv = plus.webview.getWebviewById(targetTab);

					//如果不存在则创建
					if(!_subWv) {
						_subWv = plus.webview.create("tab-botton-subpage/" + targetTab, targetTab, subpage_style);
						self.append(_subWv);
					}
					_subWv.show();
					// 隐藏之前的webview
					plus.webview.getWebviewById(activeTab).hide('none');
					activeTab = targetTab;
				});
			});
		</script>
	</body>
</html>

注：1、data-id为底部菜单webview的文件名。2、tap-botton-subpage/为存放导航菜单的文件目录名

实现逻辑说明：页面刚加载只创建第一个子页面（底部导航菜单）并显示，点击别的底部菜单时获取该菜单id并判断存不存在，如果存在则直接显示，如果不存在则先创建在显示，最后隐藏之前的webview。

如果各导航菜单页数据不多也可一次性全部创建，避免闪屏。

MUI 底部导航栏webview模式 按需加载

猜你喜欢

MUI 底部导航栏webview模式按需加载