mui底部选项卡的切换

最新推荐文章于 2024-05-10 16:30:38 发布

你的美，让我痴迷

最新推荐文章于 2024-05-10 16:30:38 发布

阅读量310

点赞数

本文链接：https://blog.csdn.net/weixin_45932157/article/details/103995751

版权

1.我们来认识在微信的底部选项卡是怎么实现页面跳转的。
主页代码：

<!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 rel="stylesheet" type="text/css" href="css/mui.min.css"/>
		 
	</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="sub1.html">
		 		<span class="mui-icon mui-icon-weixin"></span>
		 		<span class="mui-tab-label">微信</span>
		 	</a>
		 	<a class="mui-tab-item" href="sub2.html">
		 		<span class="mui-icon mui-icon-contact"></span>
		 		<span class="mui-tab-label">通讯录</span>
		 	</a>
		 	<a class="mui-tab-item" href="sub3.html">
		 		<span class="mui-icon mui-icon-paperplane"></span>
		 		<span class="mui-tab-label">发现</span>
		 	</a>
		 	<a class="mui-tab-item" href="sub4.html">
		 		<span class="mui-icon mui-icon-person"></span>
		 		<span class="mui-tab-label">我的</span>
		 	</a>
		 </nav>
		  <script src="js/mui.js"></script>
		  <script type="text/javascript">
		  	var  subPages=['sub1.html','sub2.html','sub3.html','sub4.html'];
		  	var   subPagesStyle={
		  		top:'44px',
		  		bottom:'50px'
		  		
		  	};
		  	//把窗体加入窗体之中
		  	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],subPagesStyle);
		  			sub.hide();
		  			self.append(sub);
		  		}
		  		plus.webview.show(subPages[0]);
		  	});
		  	mui(".mui-bar-tab").on("tap","a",function(e){
		  		//拿到属性
		  		var  tagPage=this.getAttribute("href");
		  		mui.toast(tagPage); 
		  		//展示页面
		  		plus.webview.show(tagPage,"fade-in",100);
		  	});
		  </script>
	</body>

</html>

底部选项卡的四个页都必须具备

<div class="mui-content">
		//	这里面写入的是内容
		</div>

这样就解决了，感觉很神奇吧！

你的美，让我痴迷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
mui底部选项卡的切换

1.我们来认识在微信的底部选项卡是怎么实现页面跳转的。主页代码：<!doctype html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,...
复制链接

扫一扫