MUI底部菜单栏 uniapp 底部菜单栏

48 阅读 0 评论 32 点赞

我是靠谱客的博主端庄吐司，最近开发中收集的这篇文章主要介绍MUI底部菜单栏 uniapp 底部菜单栏，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

先看下效果：

1. 选中报警，报警处于选中状态

2. 选中一张图一张图处于选中状态：

下面看下具体的代码：

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
			<link href="css/mui.css" rel="stylesheet"/>
			<link href="css/mui.min.css" rel="stylesheet"/>
			<link href="css/common.css" rel="stylesheet"/>
			<link href="css/icons-extra.css" rel="stylesheet"/>

			<script src="js/common.js"></script>
			<script src="js/mui.min.js"></script>
			<script src="js/native-js-1.1.5/nativejs.js"></script>
			
			<script src="js/require.js"></script>
			<script src="modifyManifest.js"></script>
		<style type="text/css">
			li {
				padding: 0em;
				border-bottom: 1px solid #eaeaea;
			}

			li:active {
				background: #f4f4f4;
			}

			.item {
				display: block;
				background: no-repeat right center url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwEAYAAAAHkiXEAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAoRJREFUeNrt179L61AUwPFz0kZRh9BBB+kkxUGM0nNp/bGKFVFBwdI/wUEQHNxdOnXzHxBXBbUiFimi2KUQ0jgIOrVKhHbSDgaKRfOGPAvvPYSWp9xSzmcp6fTlHm7uDQBjjDHGGGOMMcYYY4wxCUI7oZ3QTnf3WGosNZbq65Pd89MU2QF/04paUStalvqgPqgPpRIREZEQsrt+StsNAHKQg5xtQx7ykO/vR0REvLgIr4XXwmtTU7Lzvlv7DQAAAFZW3HP33D3PZr1nTVNQQQWz2fBB+CB8MDMju7DjfZ4FVKEKVY6PhRBCCNf1fh1HkCBBsZjszv/lkx3wlefMc+Y58/4eiAaigejhoX/UP+ofHRlBE000x8chAhGIJBKDMAiDcHtbLpfL5fL9vezujhWPx+PxuM9Hj/RIj3t7f+6ItzdhCUtYq6uyOzve5yBEUiRFcnf3cxD0QR/0Ua+TSiqpiYTszo43aU/ak3ZPD13SJV3admMQp3RKp5Ylu69ZftkBrfIWure3vlxfri8fHSEgIASD3pngOLiAC7iwuSm7s1lteg39V+PLOAUpSJ2ceP/GYrAO67D++goGGGAsLZlooolXV7J7m9X2O8C7bmqaO+QOuUNnZ7AFW7A1PQ1RiEK0WnX33X13f36+YBbMgpnPy+5tFcoO+Iqu67quBwJdapfapWYygICAExOwARuw8fKibCvbyvbcnFEySkbJMGT3dgzvVTMwINIiLdI3N43D9Zqu6bpS8XaErsvu7FjegptmY+F/33IiT5GnyNPwsOy+79Z+Z8AszMJstQo1qEHt7k5xFEdxFheNoBE0gsWi7DzGGGOMMcYYY4wxxhhjjDHGWCt+AQ7J6F+fXYnsAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTEyLTA2VDExOjUxOjAyKzA4OjAwDV/r1QAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0xMi0wNlQxMTo1MTowMiswODowMHwCU2kAAABOdEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8vL2hvbWUvYWRtaW4vaWNvbi1mb250L3RtcC9pY29uX2huMGM5Ymp6cmRxL3NleS1Gb3J3YXJkLnN2Z+G1zWIAAAAASUVORK5CYII=);
				background-size: 24px 24px;
				-ms-touch-action: auto;
			}

			.chs {
				font-size: 0.8em;
				color: #838383;
			}
			.mui-content > .mui-table-view:first-child {
			    margin-top: 0px;
			}
		</style>
	</head>

	<body>

		<script src="js/jquery.min.js"></script>
		<script src="./data/webData.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<header class="mui-bar mui-bar-nav">
		   <!-- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  -->
		    <h1 class="mui-title" id="mineName">煤矿</h1>
		</header>

<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="index2.html">
	    <span class="mui-icon icon iconfont mui-icon-home"></span>
		<span class="mui-tab-label">首页</span>
	</a>
<!-- 	<a class="mui-tab-item" href="warningList.html">
		<span class="mui-icon icon iconfont mui-icon-more-filled"></span>
		<span class="mui-tab-label">菜单</span>
	</a> -->
	<a class="mui-tab-item" href="warningList.html">
		<span class="mui-icon iconfont mui-icon-extra mui-icon-extra-notice"></span>
		<span class="mui-tab-label">报警</span>
	</a>
	<a class="mui-tab-item" href="cadshow.html">
		<span class="mui-icon icon iconfont  mui-icon-map"></span>
		<span class="mui-tab-label">一张图</span>
	</a>

	<a class="mui-tab-item" href="about.html">
	    <span class="mui-icon icon iconfont  mui-icon-contact"></span>
		<span class="mui-tab-label">我的</span>
	</a>
</nav>

	</body>
	<script type="text/javascript">
		// 第二步：窗口对象设置。首先定义一个数组，把所有页面的html的名字存储下来
		//var subpage = ["index2.html","warningList.html","setHost.html","cadshow.html","about.html"];
		var subpage = ["index2.html","warningList.html","cadshow.html","about.html"];
		// 添加页面：得到当前页面的窗口对象，再得到另外五个页面的窗口对象，最后使用一个append方法将其添加进来即可
		mui.plusReady(function () {
			// 先得到当前页面的窗口对象
			var currentWebview = plus.webview.currentWebview();
			debugger;
			for(var i= 0;i < subpage.length;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")); // 隐藏
			mui(".mui-active")[0].classList.remove("mui-active");
			plus.webview.show(currentActiveTab); // 显示
			this.classList.add("mui-active");
		});


	</script>
</html>