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

效果图
mui中webview模式简单的底部nav导航切换实例(原创转载请附上博文链接)_第1张图片


<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>

你可能感兴趣的:(mui)