mui底部导航-基于webview模式

自己最近在用MUI做app期间，首页想做一个基于webview模式的底部导航，在百度上找了一个例子，但是这个例子有一个问题，最后自己也抛弃了，换一个方式实现，原本mui提供了方案，但是最新版的已经不存了，只剩下如下两种方式实现：

div模式，说白了就是一个页面写多个页面的html代码，通过隐藏显示来切换，只能适用于一些业务逻辑简单的情景，第二种不适用我的需求，也放弃。所以自己根据官方文档和他人的博客，自己完成这个的功能。

HTML代码：通过HBuilder编译器的mt快捷键，生成如下导航栏：

<nav class="mui-bar mui-bar-tab" id="nav">
			<a class="mui-tab-item mui-active" id="0">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" id="1">
				<span class="mui-icon mui-icon-paperplane"></span>
				<span class="mui-tab-label">热点</span>
			</a>
			<a class="mui-tab-item" id="2">
				<span class="mui-icon mui-icon-compose"></span>
				<span class="mui-tab-label">阅历</span>
			</a>
			<a class="mui-tab-item" id="3">
				<span class="mui-icon mui-icon-chat"></span>
				<span class="mui-tab-label">消息</span>
			</a>
			<a class="mui-tab-item" id="4">
				<span class="mui-icon mui-icon-person"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>

设置五个a标签的id，从0到4，然后写js代码，将代码写在mui.plusReady中，在页面加载完成后才执行里面的业务逻辑

mui.plusReady(function() {
				//设置默认打开首页显示的子页序号
				var Index = 0;
				//把子页面路径写在数组里面
				var subpages = ['home.html', 'hotspot.html', 'experience.html', 'news.html', 'mine.html']
				//获取当前页面所属的Webview窗口对象
				var self = plus.webview.currentWebview();
				for(var i = 0; i < 5; i++) {
					//创建webview子页
					var sub = plus.webview.create(
						subpages[i], //子页url
						subpages[i], //子页id
						{
							top: '0px',
							bottom: '44px',
							scrollIndicator: "none" //隐藏滚动条
						}
					);
					//如果不是我们设置的子页就隐藏
					if(i != Index) {
						sub.hide()
					}
					//将webview对象填充到窗口
					self.append(sub)
				}

				//当前激活选项
				var activeTab = subpages[Index]
				var targetTab;
				mui('.mui-bar-tab').on('tap', 'a', function(e) {
					//获取子页面的id
					var j = this.getAttribute('id')
					targetTab = subpages[j]
					if(activeTab == targetTab) {
						return
					}
					//显示目标选项卡
					plus.webview.show(targetTab)
					//隐藏当前选项卡
					plus.webview.hide(activeTab)
					//更改当前活跃选项卡
					activeTab = targetTab
				})
			})

然后创建五个页面，将页面地址存入subpages数组中，然后循环创建webview子页面，将生成的五个webview子页面对象填充到窗口中，然后监听a标签的点击事件，获取点击

的a标签的id，通过坐标获取数组中的页面地址，然后显示目标选项卡，隐藏当前选项卡。这样便完成底部导航-基于webview模式，在子页面中可以完成比较复杂的子页面操作和子页面的上拉加载下拉刷新等。