龙傲天
龙傲天
  • 发布:2017-07-25 16:13
  • 更新:2017-07-28 17:22
  • 阅读:1096

webview窗口更改

分类:MUI

我的index.html页面有4个子页面,前3个布局一致,但是第4个和前3个不一样,怎么更改?

2017-07-25 16:13 1 条评论 负责人:无 分享
已邀请:
龙傲天

龙傲天 (作者)

现在用的是MUI官方例子的架构,如下是代码:

入口页面代码:
<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="html/home0.html">
<span class="mui-icon"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="html/home1.html">
<span class="mui-icon"></span>
<span class="mui-tab-label">质检单</span>
</a>
<a class="mui-tab-item" href="html/home2.html">
<span class="mui-icon"></span>
<span class="mui-tab-label">去审批</span>
</a>
<a class="mui-tab-item" href="html/home3.html">
<span class="mui-icon"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>
JS:
var navTitle;
var mainWebview;
var curtempWebview;

	var barItemWebviewArray = [];  
	var barItemArray = ['html/home0.html','html/home1.html','html/home2.html','html/home3.html'];  
	mui.plusReady(function(){  
		//获取当前title和当前webview  
		navTitle = document.querySelector('.mui-title');  
		  
		mainWebview = plus.webview.currentWebview();  
		  
		plus.navigator.setStatusBarBackground( "#FFAA00" );  
		  
		//设置只支持竖屏幕显示  
		plus.screen.lockOrientation("portrait-primary");  
		  
		//初始化与index有关的页面  
		initIndexView();  
		  
		//检测是否需要显示导航页面todo  
		  
		//判断是否已经登陆,若没有登陆将预加载登陆页面  
		judgelogin();  
		  
		//预加载父子模版  
		//initTemplate();  
	});  
	  
	//初始化  
	function initIndexView(){  
		//初始化所有bar页面  
		inittabitemWebviews();  
		//添加bar点击事件接受  
		tapBaritem();  
	}  
	  
	//初始化所有bar页面  
	function inittabitemWebviews(){  
		for (var i = 0; i < barItemArray.length; i++) {  
			barItemWebviewArray[i] = mui.preload({  
				id:barItemArray[i],  
				url:barItemArray[i],  
				styles:{  
					top:'44px',  
					bottom: '51px',  
					left: '0px',  
					bounce: 'vertical'  
				},  
				waiting:{  
					autoShow:false  
				}  
			});  
			barItemWebviewArray[i].hide();  
			mainWebview.append(barItemWebviewArray[i]);  
		}  
		barItemWebviewArray[0].show();  
		curBarItemWebview = barItemWebviewArray[0];  
	}  
	  
	//添加点击事件  
	function tapBaritem(){  
		mui('.mui-bar-tab').on('tap','.mui-tab-item',function(){  
			var baritem = this;  
			var baritemurl = baritem.getAttribute('href');  
			if (!~curBarItemWebview.getURL().indexOf(baritemurl)) {  
				for (var i = 0; i < barItemArray.length; i++) {  
					if (barItemArray[i] == baritemurl) {  
						//更改头部名字  
						navTitle.innerText = baritem.children[baritem.children.length-1].innerText;  
						//切换baritemwebview  
						barItemWebviewArray[i].show();  
						curBarItemWebview = barItemWebviewArray[i];  
						break;  
					}  
				}  
			}  
		});  
	}  
	  
	function judgelogin() {  
		//测试语句  
		localStorage.removeItem('user');  
		//判断是否已经登录成功  
		//localstorage在页面关闭的时候也同样存在,sessionstorage页面关闭数据不存在  
		if (!localStorage.getItem('user')) {  
			mui.preload({  
				url:'login.html',  
				id:'login.html',  
				styles:{  
					top:'0px',  
					bottom:'0px'  
				}  
			});  
		}  
	}
chender

chender - 与人为善

第四个页面,出了顶部的背景不好变,其他的都可以通过css实现

语嫣

语嫣

沉浸式状态栏 就好了吧

该问题目前已经被锁定, 无法添加新回复