MUI框架关于底部导航切换至不同页面（webview）的方法_flutter使用底部导航栏接入多个webview页面-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41960337/article/details/81589555

1. 先显示第一个，隐藏剩下的；点击时，根据href显示点击的页面，隐藏前一个，其中包含了iframe的兼容方案，代码如下：

<!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"/>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<h1 class="mui-title">标题</h1>
	</header>
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item mui-active" href="home.html">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item" href="message.html">
			<span class="mui-icon mui-icon-phone"></span>
			<span class="mui-tab-label">消息</span>
		</a>
		<a class="mui-tab-item" href="setting.html">
			<span class="mui-icon mui-icon-gear"></span>
			<span class="mui-tab-label">设置</span>
		</a>
	</nav>
	<script type="text/javascript" charset="utf-8">
			mui.init();
			var index = 0;
			var subpages = ['home.html','message.html','setting.html'];
			
			mui.plusReady(function () {
			    var self = plus.webview.currentWebview();
					for (var i = 0; i < subpages.length; i++) {
						var sub = plus.webview.create(
						subpages[i], subpages[i], {
							top: '45px',
							bottom: '50px'
						});
						if(i > index){
							sub.hide();
						}
						self.append(sub);
					}
			});
			var activeTab = subpages[index];
			mui('.mui-bar-tab').on('tap', 'a', function (){
				var targetTab = this.getAttribute('href');
				if(activeTab == targetTab){
					return;
				}
				if(mui.os.plus){
					plus.webview.show(targetTab);
					plus.webview.hide(activeTab);
					activeTab = targetTab;
				} else {
					createIframe('.mui-content', {
						url: targetTab,
						style: {
							top: '45px',
							bottom: '50px'
						}
					})
				}
			});
			function createIframe(el,opt) {
				var elContainer = document.querySelector('mui-content');
				var wrapper = document.querySelector('.mui-iframe-wrapper');
				if(!wrapper){
					wrapper = document.createElement('div');
					wrapper.className = 'mui-iframe-wrapper';
					for (var i in opt.style) {
						wrapper[i] = opt.style[i];
					}
				}	
				var iframe = document.createElement('iframe');
				iframe.src = opt.url;
				iframe.id = opt.id || opt.url;
				iframe.name = opt.id;
				wrapper.appendChild(iframe);
				elContainer.appendChild(wrapper);
			}
	</script>
</body>
</html>

2. 采用双webview，需要在manifest.json中：“plus”中配置第一张加载的webview，

plus配置

代码如下：

<!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"/>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<h1 class="mui-title">标题</h1>
	</header>
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item mui-active" href="home.html">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item" href="message.html">
			<span class="mui-icon mui-icon-phone"></span>
			<span class="mui-tab-label">消息</span>
		</a>
		<a class="mui-tab-item" href="setting.html">
			<span class="mui-icon mui-icon-gear"></span>
			<span class="mui-tab-label">设置</span>
		</a>
	</nav>
	<script type="text/javascript" charset="utf-8">
			mui.init();
			var subpages = ['home.html','message.html','setting.html'];
			var activeTab = subpages[0];
			
			var currentWebview;
			var subpage_style = {
				top: '45px',
				bottom:'50px'
			}
			mui.plusReady(function () {
			    currentWebview = plus.webview.currentWebview();
				var secondWenview = plus.webview.getSecondWebview();
				currentWebview.append(secondWenview);
			});
			
			mui('.mui-bar-tab').on('tap', 'a', function() {
				var targetTab =this.getAttribute('href');
				if(targetTab == activeTab){
					return;
				}
				
				var targetWebview = plus.webview.getWebviewById(targetTab);
				if(!targetWebview){
					targetWebview = plus.webview.create(targetTab, targetTab, 
					subpage_style);
					currentWebview.append(targetWebview);
				}
				targetWebview.show('fade-in', 300);
				plus.webview.hide(activeTab);
				activeTab = targetTab;
			})
	</script>
</body>
</html>