mui中webview模式简单的底部nav导航切换实例（原创转载请附上博文链接）

最新推荐文章于 2023-07-16 19:06:01 发布

真是6的不行

最新推荐文章于 2023-07-16 19:06:01 发布

阅读量1.7k

点赞数 2

分类专栏： mui 文章标签： mui

本文链接：https://blog.csdn.net/qq_23878541/article/details/90576898

版权

mui 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述

<!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" />
	</head>

	<body id="body">
        <!-- 主页面标题 -->
        <header class="mui-bar mui-bar-nav">
            <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
            <h1 class="mui-title">标题</h1>
        </header>
		
		<!-- 主页面内容容器 -->
		<div class="mui-content">

		</div>
        
        <!-- 底部导航 -->
        <nav class="mui-bar mui-bar-tab">
		    <a class="mui-tab-item mui-active" id="tab0">
		        <span class="mui-icon mui-icon-home"></span>
		        <span class="mui-tab-label">首页</span>
		    </a>
		    <a class="mui-tab-item" id="tab1">
		        <span class="mui-icon mui-icon-phone"></span>
		        <span class="mui-tab-label">电话</span>
		    </a>
		    <a class="mui-tab-item" id="tab2">
		        <span class="mui-icon mui-icon-email"></span>
		        <span class="mui-tab-label">邮件</span>
		    </a>
		    <a class="mui-tab-item" id="tab3">
		        <span class="mui-icon mui-icon-gear"></span>
		        <span class="mui-tab-label">设置</span>
		    </a>
		</nav>
		
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
			
	        var subPageUrl = ['tab1.html','tab2.html','tab3.html','tab4.html'];//子页面的路径
	        var subWebview = {};//子页面的webview
	        var currentTabIndex = 0;//当前tab的下标
	        
	        mui.plusReady(function(){
	        	//预加载tab页面，并将页面添加到主页面
	        	var main = plus.webview.currentWebview();//当前页面是主页面，直接取得
	        	for(i in subPageUrl){
	        		//alert(subPageUrl[i])
	        		subWebview[i] = mui.preload({//预加载每个子页面，生成的webview加入视图集合
	        			id: subPageUrl[i],
	        			url: subPageUrl[i],
	        			styles: {//设置子页面样式
							top: '44px',//距离顶部44px
							bottom: '51px',//距离底部51px
							left: '0px',
							bounce: 'vertical',
							bounceBackground: '#DCDCDC'
						},
						waiting: {
							autoShow: false //不显示
						}
	        		})
	        		subWebview[i].hide();//隐藏每个子页面
	        		main.append(subWebview[i]);//将子页面添加到主页面中
	        	}
	        	subWebview[currentTabIndex].show();
	        	
	        	
	        	
	        	//监听tab切换
	        	mui(".mui-bar-tab").on("tap","a",function(){
	        		var id = mui(this)[0].getAttribute("id");
	        		var tabIndex = id.replace("tab","");
	        		if(currentTabIndex == tabIndex){
	        			return;
	        		}else{
	        			currentTabIndex = tabIndex;
	        			var tabUrl = subPageUrl[tabIndex];//取得webview的路径，也是id
	        			subWebview[currentTabIndex].hide();//隐藏当前的页面
	        			subWebview[tabIndex].show();//显示需要显示的页面
	        		}
	        	})
	        	
	        })
		</script>
	</body>

</html>

真是6的不行

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
mui中webview模式简单的底部nav导航切换实例（原创转载请附上博文链接）

效果图<!doctype html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale...
复制链接

扫一扫