superatc
superatc
  • 发布:2016-01-08 03:21
  • 更新:2017-03-09 22:01
  • 阅读:4543

子页面会偶尔遮盖父页面

分类:MUI
mui


```这幅图上面的导航是用Mui的nav做的,是父页面,点击上面的导航相应的webview显示,  
这幅图是子页面,偶尔点击上面的导航会出现以下情况,子页面并不是按照父页面指定的top:50px,而是子页面弹上去遮住了父页面的导航栏。
代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet" /> <link href="http://at.alicdn.com/t/font_1451898475_6755753.css" rel="stylesheet" /> <script type="text/javascript" charset="UTF-8"> mui.init(); </script> <style type="text/css"> .mui-bar { background-color: #E15D50; height: 50px; line-height: 50px; box-shadow: initial; z-index: 999; } .mui-bar-tab { top: 0; bottom: initial; } .mui-bar-tab>.mui-tab-item.mui-active { color: #fff; font-weight: bold; } .mui-bar-tab>.mui-tab-item { color: #fff; } .loading { width: 100%; height: 50px; overflow: hidden; margin-top: 50px; text-align: center; font-size: 14px; color:#666; line-height: 50px; } </style> </head> <body> <header class="mui-bar mui-bar-tab"> <a id="defaultTab" class="mui-tab-item mui-active" href="recom.html"> <span class="mui-tab-label">推荐</span> </a> <a class="mui-tab-item" href="kor.html"> <span class="mui-tab-label">韩语</span> </a> <a class="mui-tab-item" href="eng.html"> <span class="mui-tab-label">英语</span> </a> <a class="mui-tab-item" href="yy.html"> <span class="mui-tab-label">粤语</span> </a> <a class="mui-tab-item" href="jap.html"> <span class="mui-tab-label">日语</span> </a> </header> <!--<div class="loading"> 正在加载...... </div>--> <script type="text/javascript" charset="utf-8"> //mui初始化 mui.init(); var subpages = ['recom.html', 'kor.html', 'eng.html', 'yy.html', 'jap.html']; var subpage_style = { top: '50px', bottom: '0' }; var aniShow = {}; //创建子页面,首个选项卡页面显示,其它均隐藏; mui.plusReady(function() { // 在Android5以上设备,如果默认没有开启硬件加速,则强制设置开启 if (!plus.webview.defauleHardwareAccelerated() && parseInt(plus.os.version) >= 5) { subpage_style.hardwareAccelerated = true; } var ws = plus.webview.currentWebview(); var wvs = plus.webview.all(); for (var i = 0; i < wvs.length; i++) { console.log("webview" + i + ": " + wvs[i].getURL()); } //点击返回按钮直接弹出是否退出应用 mui.back = function() { var selectshow = plus.webview.create("select.html", 'select'); selectshow.show("slide-in-right", 300); plus.webview.close(ws); } 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]; //选项卡点击事件 mui('.mui-bar-tab').on('tap', 'a', function(e) { var targetTab = this.getAttribute('href'); if (targetTab == activeTab) { return; } //显示目标选项卡 if (mui.os.ios || aniShow[targetTab]) { plus.webview.show(targetTab); } else { var temp = {}; temp[targetTab] = "true"; mui.extend(aniShow, temp); plus.webview.show(targetTab, "fade-in", 300); } //隐藏当前; plus.webview.hide(activeTab); //更改当前活跃的选项卡 activeTab = targetTab; }); //自定义事件,模拟点击“首页选项卡” document.addEventListener('gohome', function() { var defaultTab = document.getElementById("defaultTab"); //模拟首页点击 mui.trigger(defaultTab, 'tap'); }); </script> </body> </html> 请大神帮帮忙,看看是哪里有问题~
2016-01-08 03:21 负责人:无 分享
已邀请:
thyiad

thyiad

这个写法没问题,你把bottom:0 写成bottom:'0px'试试

超级赛亚人

超级赛亚人

我也遇到了,我的是吧nav放底部了;第一次切换时会有这种情况;子页面闪一下遮盖住了,然后在正常显示;有的手机直接一直遮盖不会变正常

超级赛亚人

超级赛亚人

如下图

zhaojiamin

zhaojiamin

设置nav的z-index试试

耐心

耐心

你好,这个问题解决了吗?

y***@163.com

y***@163.com

我的子界面怎么打不开呢,报错 未定义 show???

丶多想

丶多想

楼主这个问题解决了嘛,我也碰到了,要怎么办啊

mcNull

mcNull

这个问题如何解决?

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