5***@qq.com
5***@qq.com
  • 发布:2017-11-03 10:29
  • 更新:2017-11-03 15:20
  • 阅读:2543

webview实现的底部选项卡,安卓按返回键,子页面白屏

分类:MUI

详细问题描述
我用了一个main.html 和五个子页面,来实现底部webview无刷新切换。 其中有两个子页面,在点了返回键的时候子页面就白屏了。 另外三个是正常的,这就让我很郁闷了,实在是找不到问题所在。

重现步骤
[步骤]
正常界面:


[结果]
返回白屏的页面:

[期望]
首页正常页面:

首页返回也正常,不会白屏

运行环境
[系统版本]
手机:魅蓝note3
Android版本:5.1
版本号:Flyme 6.1.0.0A

[浏览器版本]
chrome浏览器 没找到版本。

[IDE版本]
HBuilder
8.8.4.201709282021

[mui版本]
不知道怎么看mui版本。
附件
[代码片段]
点上面的代码,没有出现包住代码的东西,我代码一会补在下面的回复上。

[安装包]
我简化了一下项目,附件可以下载后解压用hbuild打开。

联系方式
[QQ]
2548332563

2017-11-03 10:29 负责人:无 分享
已邀请:
5***@qq.com

5***@qq.com (作者) - 这家伙很懒,什么都没有留下~

补上我main.html 页面的代码

<!DOCTYPE html>  
<html>  
<head>  
	<meta charset="utf-8">  
	<title>红鱼</title>  
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
	<meta name="apple-mobile-web-app-capable" content="yes">  
	<meta name="apple-mobile-web-app-status-bar-style" content="black">  
	<link rel="stylesheet" href="css/mui.min.css">  
	<link rel="stylesheet" href="css/home.css">  
	<link rel="stylesheet" href="css/app.css">  
	<link rel="stylesheet" type="text/css" href="css/icons-extra.css" />  
	<style>  
		html,body,.mui-bar {  
			background-color: #FFF;  
		}  
		a{color:#000;}  
		.mui-bar-tab .mui-tab-item.mui-active{  
			color: #ff3366;  
		}  
	</style>  
</head>  
<body>  
	<header class="mui-bar mui-bar-nav">  
		<a class=" mui-icon mui-icon-search mui-pull-left"></a>  
		<h1 id="title" class="mui-title">首页</h1>  
		<span id="left-icon" class="mui-icon mui-icon-gear-filled mui-pull-right"></span>  
	</header>  
	<nav class="mui-bar mui-bar-tab">  
		<a id="defaultTab" class="mui-tab-item mui-active" href="index.html">  
			<span class="mui-icon mui-icon-home"></span>  
			<span class="mui-tab-label">首页</span>  
		</a>  
		<a class="mui-tab-item" href="cate.html">  
			<span class="mui-icon mui-icon-extra mui-icon-extra-class" style="font-size:20px;"></span>  
			<span class="mui-tab-label">分类</span>  
		</a>  
		<a class="mui-tab-item" href="yaoqing.html">  
			<span class="mui-icon mui-icon-upload" style="margin-bottom: 3px;"></span>  
			<span class="mui-tab-label">邀请</span>  
		</a>  
		<a class="mui-tab-item" href="shopcar.html">  
			<span class="mui-icon mui-icon-extra mui-icon-extra-cart" style="font-size:20px;"></span>  
			<span class="mui-tab-label">购物车</span>  
		</a>  
		<a class="mui-tab-item" href="me.html">  
			<span class="mui-icon mui-icon-extra mui-icon-extra-people" style="font-size:20px;"></span>  
			<span class="mui-tab-label">我的</span>  
		</a>  
	</nav>  
	<script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>  
	<script src="js/mui.min.js"></script>  
	<script type="text/javascript" charset="utf-8">   
		var main,menu,mask;  
		//mui初始化  
		mui.init({  
			swipeBack: false,  
			beforeback: back  
		});  
  
		function back() {  
//			menu.close('none');  
			return true;  
		}  
		// plusReady事件后,自动创建menu窗口;  
		mui.plusReady(function() {  
			  
		});  
		/**  
		 * 子页面选项卡  
		 */  
		var subpages = ['index.html', 'cate.html', 'yaoqing.html', 'shopcar.html','me.html'];  
		var subpage_style = {  
			top: '45px',  
			bottom: '51px'  
		};  
		  
		var aniShow = {};  
		 //创建子页面,首个选项卡页面显示,其它均隐藏;  
		mui.plusReady(function(){  
			var self = plus.webview.currentWebview();  
			for (var i = 0; i < 5; i++) {  
				var temp = {};  
				var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);  
				if (i > 0) {  
					sub.hide();  
				}else{  
					temp[subpages[i]] = "true";  
					mui.extend(aniShow,temp);  
				}  
				self.append(sub);  
			}  
		});  
		 //当前激活选项  
		var activeTab = subpages[0];  
		var title = document.getElementById("title");  
		 //选项卡点击事件  
		mui('.mui-bar-tab').on('tap', 'a', function(e) {  
			var targetTab = this.getAttribute('href');  
			if (targetTab == activeTab) {  
				return;  
			}  
			//更换标题  
			title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;  
			//显示目标选项卡  
			//若为iOS平台或非首次显示,则直接显示  
			if(mui.os.ios||aniShow[targetTab]){  
				plus.webview.show(targetTab);  
			}else{  
				//否则,使用fade-in动画,且保存变量  
				var temp = {};  
				temp[targetTab] = "true";  
				mui.extend(aniShow,temp);  
				plus.webview.show(targetTab,"fade-in",300);  
			}  
			//隐藏当前;  
			plus.webview.hide(activeTab);  
			//更改当前活跃的选项卡  
			activeTab = targetTab;  
		});  
		mui('.mui-bar-tab').on('tap', '#yaoqing', function(e) {  
			document.getElementById("yaoqing").src= 'images/che.png';  
		});  
		 //自定义事件,模拟点击“首页选项卡”  
		document.addEventListener('gohome', function(){  
			var defaultTab = document.getElementById("defaultTab");  
			//模拟首页点击  
			mui.trigger(defaultTab, 'tap');  
			//切换选项卡高亮  
			var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");  
			if (defaultTab !== current) {  
				current.classList.remove('mui-active');  
				defaultTab.classList.add('mui-active');  
			}  
		});  
	</script>  
	<script>  
		/*------------预加载设置单页面------------*/  
	var gourl = 'search.html';  
	var seturl = 'setpage.html';  
		  
		mui.init({  
			preloadPages: [{//预加载目标页面  
				'url': gourl,  
				'id': gourl,  
			},{  
				'url': seturl,  
				'id': seturl,  
			}]  
		});  
		  
		window.onload = function(){  
			var Page = null;  
			var setpage = null;  
			$('header').on('tap','a',function(){  
				if (!Page) {  
					Page = plus.webview.getWebviewById(gourl);  
				}  
				mui.openWindow({ //目标页面  
					id: gourl,  
				});  
			});  
			  
			$('header').on('tap','#left-icon',function(){  
				if (!setpage) {  
					setpage = plus.webview.getWebviewById(seturl);  
					if(setpage){  
						plus.webview.close(setpage,'none');  
					}  
				}  
				mui.openWindow({ //目标页面  
					url:seturl,  
					id: seturl,  
				});  
			});  
		}  
	/*------------预加载设置单页面结束--------*/  
	</script>  
</body>  
  
</html>
5***@qq.com

5***@qq.com (作者) - 这家伙很懒,什么都没有留下~

自顶一下, 还是没解决。。。

静候

静候

你好,经过你的描述,应该是me页面监听了安卓的返回按键,导致页面退出,你可以加一行代码,根据你的demo测试,可以避免那种情况。

mui.init({  
    	keyEventBind: {  
		backbutton: false,  //Boolean(默认true)关闭back按键监听  
		menubutton: true   //Boolean(默认true)关闭menu按键监听  
	}  
    });
  • 5***@qq.com (作者)

    原来是这样啊, 好了, 谢谢你


    2017-11-03 15:29

  • LOL乌迪尔

    确实可以。那么请问不用mui.init 的方法,用plus的方法怎么实现屏蔽 backbutton 和 menubutton?


    2018-02-01 11:31

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