mui底部导航条选项卡切换页面，切换子页面模式

最新推荐文章于 2024-02-20 14:51:01 发布

原创最新推荐文章于 2024-02-20 14:51:01 发布 · 6.4k 阅读

39 ·

CC 4.0 BY-SA版权

文章标签：

#mui框架 #移动端

本文介绍如何利用mui框架在移动端创建一个底部导航条，通过切换子页面来实现不同内容的显示。主要步骤包括：创建多个子页面，编写带有底部导航栏的主页面代码，并运行查看效果。

先看效果图：

实现原理：通过切换中间部分子页面进行实现

实现步骤：

第一步：创建所需的子页面，这里仅展示其中一个子页面代码，其他子页面照瓢画葫即可。

<!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.min.css" rel="stylesheet" />
		
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <h1 class="mui-title">首页</h1>
		</header>
		

	</body>

</html>

第二步：实现带有底部导航栏的主页面，主页面所有代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="lib/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
    
      	mui.init();
    </script>
</head>
<body>


	<!--底部导航条-->
	<nav class="mui-bar mui-bar-tab" id="nav-tabbar"> 
	    <a class="mui-tab-item mui-active" id="home">
			<span class="mui-icon fa fa-home"></span>
			<span class="mui-tab-label"  >首页</span>
	    </a>
	    <a class="mui-tab-item" id="developer">
			<span class="mui-icon fa fa-group"></span>
			<span class="mui-tab-label"  >攻城狮</span>
	    </a>
	    <a class="mui-tab-item" id="search">
			<span class="mui-icon fa fa-eye"></span>
			<span class="mui-tab-label"  >发现</span>
	    </a>
	    <a class="mui-tab-item" id="need">
			<span class="mui-icon fa fa-file-text"></span>
			<span class="mui-tab-label"  >需求</span>
	    </a>
	    <a class="mui-tab-item" id="user">
			<span class="mui-icon fa fa-user"></span>
			<span class="mui-tab-label"  >我的</span>
	    </a>
   </nav>

	<script>
		
		var defaultpage = "home.html";	// 定义默认选项卡子页面
		
		// 定义所有子页面
		var subpages = ['home.html', 'developer.html', 'search.html','need.html','user.html'];
		
		// 页面加载完成后加载子页面
		mui.plusReady(function(){
			var current =  plus.webview.currentWebview();	//获取当前页面的窗口对象
			
			// 加载所有子页面
			for(var i =0;i<5;i++){
				var sub = plus.webview.create(
					subpages[i], 
                    subpages[i], 
                    {
                        top: '0px', 
                        bottom: '50px' 
                    }
				);
				// 除默认页面外，其他子页面隐藏
				if(subpages[i] != defaultpage){
					sub.hide();
				}
				current.append(sub);	// 子页面加入窗口对象
			}
		});
		
		// 创建点击事件
		mui("#nav-tabbar").on("tap","a",function(e){
			plus.webview.hide(defaultpage);		// 隐藏上一个子页面
			plus.webview.show(this.id + ".html")	// 显示当前点击页面
			defaultpage = this.id + ".html";	// 记录当前点击页面
		})

	</script>

</body>
</html>

第三步：没有第三步了，运行即可。

仅当笔记使用，不喜勿喷。