mui 底部导航菜单功能（原创）[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

简单版

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>底部导航菜单切换</title>
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		
	</head>
	<body>
		<nav class="mui-bar mui-bar-tab " id="nav">
			<a class="mui-tab-item mui-active" id="a1">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item " id="a2">
				<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
				<span class="mui-tab-label">消息</span>
			</a>
			<a class="mui-tab-item " id="a3">
				<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
				<span class="mui-tab-label">消息</span>
			</a>
		</nav>
		<script src="../../../js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init({
				    subpages:[//先加载首页
				    	{
					      url:'1.html',
					      id:'a1',
					      styles:{
					      	 top:'0px',
		        				bottom:'60px'
					      }
					    }
				   		
				    ],
				    preloadPages:[//缓存其他页面
					    {
					      url:'2.html',
					      id:'a2',
					      styles:{
					      	 top:'0px',
		        			bottom:'60px'
					      }
					    },
					    {
					      url:'3.html',
					      id:'a3',
					      styles:{
					      	 top:'0px',
		        			bottom:'60px'
					      }
					    }
				 	]
				    
				});
			mui.plusReady(function(){ 
				// 获取所有Webview窗口
				var winAll=plus.webview.all();//获取所有窗体
				//console.log(JSON.stringify(winAll)) 
				var a1,a2,a3
				mui("#nav").on("tap","#a1",function(){//点击触发 
					a1=plus.webview.getWebviewById("a1");
					console.log(JSON.stringify(a1)) 
					a1.show()
					a2.hide()//这一步必须有
					a3.hide()//这一步必须有
				})
				mui("#nav").on("tap","#a2",function(){//点击触发
					a2=plus.webview.getWebviewById("a2");
					a2.show()
					
				})
				mui("#nav").on("tap","#a3",function(){//点击触发
					a3=plus.webview.getWebviewById("a3");
					a3.show()
					
				})
			});
		</script>
		
	</body>
</html>

专业版

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>底部导航菜单切换(专业写法)</title>
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		
	</head>
	<body>
		<nav class="mui-bar mui-bar-tab " id="nav">
			
		</nav>
		<script src="../../../js/jquery.js"></script>
		<script src="../../../js/mui.min.js"></script>
		
		<script type="text/javascript" charset="utf-8">
		    var hrefArr=[
						    {"title":"首页","id":"a1","href":"1.html","icon":"mui-icon-home"},
						    {"title":"消息也","id":"a2","href":"2.html","icon":"mui-icon-email"},
						    {"title":"个人中心","id":"a3","href":"3.html","icon":"mui-icon-contact"}
					    ]//要跳转的  页面跟他的ID要先写好
			var navFirst=[],navOther=[],viewObj=[]//第一个页面数据  其他页面数据 窗体对象
			
			mui.plusReady(function(){ 
				navInit()
				clickFun(navFirst[0].id,plus.webview.getWebviewById(navFirst[0].id))
				mui("#nav").on("tap","a",function(e){
					var id=$(this).attr("id")
					var obj=plus.webview.getWebviewById(id)
					clickFun(id,obj)
				})
			});
			function clickFun(id,obj){
				if(id==navFirst[0].id){
						$.each(navOther,function(i,v){
							var otherObj=plus.webview.getWebviewById(v.id)
							otherObj.hide()
						})
					}
				obj.show()
			}
			//初始化html
			function navInit(){
				var html=""
				$.each(hrefArr,function(i,v){
					if(i==0){
						
					}
					html+='<a class="mui-tab-item'+((i==0)?" mui-active":"")+' " id="'+v.id+'">'+
							'<span class="mui-icon '+v.icon+'"></span>'+
							'<span class="mui-tab-label">'+v.title+'</span>'+
						  '</a>'
				})
				$("#nav").html(html)
				$.each(hrefArr,function(i,v){ 
					var arrI={"url":v.href,"id":v.id,styles:{top:'0px',bottom:'60px' }}
					if(i==0){//第一个页面
						navFirst.push(arrI)
					}else{//缓存住的页面
						navOther.push(arrI)
					}
				})
				mui.init({
				    subpages:navFirst,//先加载首页
				    preloadPages:navOther//缓存其他页面
				});
				
			}
			//点击事件初始化
			
		</script>
		
	</body>
</html>

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/159430.html原文链接：https://javaforall.net