MUI-底栏实现-页面切换

Posted 2022-04-11 时光-ing

MUI-底栏实现-页面切换：通过“窗口管理”和“事件”来实现页面切换的效果。
第一步：底部选项卡制作

<nav class="mui-bar mui-bar-tab myfooter">
	<!-- 在移动端app开发的过程中，不使用href做跳转工作，因为平时浏览网页的时候，通过超链接跳转网页，有一个加载的过程，
	而在此过程中有一段转场空白，这在APP中是非常不友好的。 -->
	<!-- mui-active 激活元素，点击的时候会变成蓝色，并且自动添加出mui-active -->
	<a class="mui-tab-item mui-active" id="btn" href="home.html">
	    <span class="mui-icon icon iconfont icon-zhifubao"></span>
		<span class="mui-tab-label">首页</span>
	</a>
	<a class="mui-tab-item" href="wealth.html">
		<span class="mui-icon icon iconfont icon-caifu"></span>
		<span class="mui-tab-label">财富</span>
	</a>
	<a class="mui-tab-item" href="praise.html">
		<span class="mui-icon icon iconfont icon-koubei"></span>
		<span class="mui-tab-label">口碑</span>
	</a>
	<a class="mui-tab-item" href="friends.html">
		<span class="mui-icon icon iconfont icon-pengyou"></span>
		<span class="mui-tab-label">朋友</span>
	</a>
	<a class="mui-tab-item" href="mine.html">
	    <span class="mui-icon icon iconfont icon-31wode"></span>
		<span class="mui-tab-label">我的</span>
	</a>
</nav>

第二步：窗口对象设置

// 第二步：窗口对象设置。首先定义一个数组，把所有页面的html的名字存储下来
var subpage = ["home.html","wealth.html","praise.html","friends.html","mine.html"];
// 添加页面：得到当前页面的窗口对象，再得到另外五个页面的窗口对象，最后使用一个append方法将其添加进来即可
mui.plusReady(function () 
	// 先得到当前页面的窗口对象
	var currentWebview = plus.webview.currentWebview();
    for(var i= 0;i < 5;i++)
		// 将五个页面对应的窗口对象都创建出来
		var sub = plus.webview.create(subpage[i],subpage[i],
			top:"50px",
			bottom:"50px"
		);
		// 将子窗口对象添加到当前页面窗口对象中
		currentWebview.append(sub);
		// 令打开APP首次展示的是首页，即subpage[0],若不加判断，则展示的是subpage[4]
		if(i > 0)
			sub.hide();
		
	
);

第三步：点击事件处理

// 第三步：事件处理。点击底部按钮，其实就是点击不同的超链接元素，切换不同的元素显示和隐藏。
// 首先，给超链接元素绑定事件，针对不同的href，显示/隐藏不同的webview
mui(".myfooter").on("tap","a",function()
	// alert(this.href);
	var currentActiveTab = this.getAttribute("href");
	if(currentActiveTab == mui(".mui-active")[0].getAttribute("href"))
		return; 
	;
	plus.webview.hide(mui(".mui-active")[0].getAttribute("href")); // 隐藏
	plus.webview.show(currentActiveTab); // 显示
);