mui实现底部导航栏切换子页面

最新推荐文章于 2024-04-27 21:55:17 发布

蓝胖子不是胖子

最新推荐文章于 2024-04-27 21:55:17 发布

阅读量990

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_55272229/article/details/131753731

版权

<!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/foot.css" rel="stylesheet" />
		<style type="text/css">
		.mui-bar .mui-tab-item {
		  color: black; /* 默认链接颜色 */
		}
		
		.mui-bar .mui-tab-item a:hover {
		  color: red; /* 鼠标悬停时的颜色 */
		}
		.mui-bar .mui-tab-item:active {
		
		  color: red;
		}
		
		.mui-bar .mui-tab-item a:visited {
		  color: red; /* 已访问链接的颜色 */
		}
		</style>
	</head>

	<body>
		<!-- 底部选项卡
		 -->
		 <!-- 每一个选项都是一个a标签方便跳转 --> 
	 	<!-- <nav class="mui-bar mui-bar-tab " id="foot_tab">
			
			<a class="mui-tab-item mui-active" id="index">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
				<a class="mui-tab-item " id="map">
				<span class="mui-icon mui-icon-star"></span>
				<span class="mui-tab-label">地图</span>
			</a>
			<a class="mui-tab-item" id="orders">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">订单</span>
			</a>
			<a class="mui-tab-item" id="my">
				<span class="mui-icon mui-icon-person"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav> -->
		
<!-- 		  底部导航栏相关HTML-->
		  <nav class="mui-bar mui-bar-tab">
		    <a id="defaultTab" href="index" class="mui-tab-item mui-active">
		      <span class="mui-icon mui-icon-home"></span>
		      <span class="mui-tab-label">首页</span>
		    </a>
		    <a class="mui-tab-item" href="map">
		      <span class="mui-icon mui-icon-map"></span>
		      <span class="mui-tab-label">地图</span>
		    </a>
		    <a class="mui-tab-item" href="orders">
		      <span class="mui-icon mui-icon-contact"></span>
		      <span class="mui-tab-label">订单</span>
		    </a>
		    <a class="mui-tab-item" href="my">
		      <span class="mui-icon mui-icon-person"></span>
		      <span class="mui-tab-label">我的</span>
		    </a>
		  </nav>
		  <!--装载子页面的容器-->
		  <div id="content"></div>
		</body>
		
		
		
		<script src="js/mui.js"></script>
		<!-- 初始化 -->
	
		<script type="text/javascript">
			//        // 第一步验证登录状态
				   
			// 		var defaultpage = "index.html";	// 定义默认选项卡子页面
					
			// 		// 定义所有子页面
			// 		var subpages = ['index.html', 'map.html', 'orders.html','my.html'];
					
			// 		// 页面加载完成后加载子页面
			// 		mui.plusReady(function(){
					
			// 			var current =  plus.webview.currentWebview();	//获取当前页面的窗口对象
						
			// 			// 加载所有子页面
			// 			for(var i =0;i<subpages.length;i++){
			// 				var sub = plus.webview.create(
			// 					subpages[i], 
			//                     subpages[i], 
			//                     {
			//                         top: '0px', 
			//                         bottom: '50px' 
			//                     }
			// 				);
			// 				// 除默认页面外，其他子页面隐藏
			// 				if(subpages[i] != defaultpage){
			// 					sub.hide();
			// 				}
			// 				current.append(sub);	// 子页面加入窗口对象
			// 			}
			// 		});
					
			// 		// 创建点击事件
			// 		mui("#foot_tab").on("click","a",function(e){
			// 			plus.webview.hide(defaultpage);		// 隐藏上一个子页面
			// 			plus.webview.show(this.id + ".html")	// 显示当前点击页面
			// 			defaultpage = this.id + ".html";	// 记录当前点击页面
			// 		})
			


// 2.将页面放入div
mui.plusReady(function () {
    mui('.mui-bar-tab').on('tap', 'a', function(e) {
        var index = this.getAttribute('href');
        var content = document.getElementById('content');
        while(content.firstChild) {
            content.removeChild(content.firstChild);
        }

        //打开新的页面
        mui.openWindow({
            url: index + '.html',
            id: index,
            styles: {
                top: '0px',
                bottom: '51px',
            },
            createNew: true,
            show: {
                autoShow: true
            },
            waiting: {
                autoShow: true
            },
            appendTo: '#content'
        });
        
      
    });

    // 手动触发一次首页的点击事件
    mui.trigger(document.getElementById('defaultTab'), 'tap');
});

		</script>
	</body>

</html>

蓝胖子不是胖子

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
mui实现底部导航栏切换子页面

/ plus.webview.show(this.id + ".html") // 显示当前点击页面。// // 除默认页面外，其他子页面隐藏。// // 第一步验证登录状态。// // 页面加载完成后加载子页面。// // 加载所有子页面。// // 定义所有子页面。// // 创建点击事件。
复制链接

扫一扫