Curtis
Curtis
  • 发布:2014-11-01 02:32
  • 更新:2016-07-10 11:10
  • 阅读:6840

使用tabbar webview模式,选项卡内新打开页面被遮挡的问题

分类:HTML5+
mui

**问题已解决:tabbar不要直接写在入口页面中,创建个新页面写tabbar,在首页用subpages调用。

最终解决方案:
上面的方法启动时相当卡,且容易白屏。经过分析,确定官方的demo中存在一样的问题,并找到原因,下面是解决方法。
官方的案例中,使用了一个数组来存储预加载的子页面的路径,并使用了一个for循环,逐个进行预加载,判断i>0的页面,逐个隐藏掉。这个循环是这样的:
{{{
for(var i=0;i<4;i++){
var sub = plus.webview.create(subpages[i],subpages[i],subpage_style);
if(i>0){
sub.hide();
}
self.append(sub);
}
}}}
改成
{{{
for(var i=0;i<4;i++){
var sub = plus.webview.create(subpages[i],subpages[i],subpage_style);
self.append(sub);
if(i>0){
sub.hide();
}
}
}}}
就是调整了下self.append()的位置。
我自己的理解是,原demo的写法是先隐藏掉页面,再把页面append到主webview之上,顺序从逻辑上看就有问题。效果是页面虽然看不到了,但实际上从显示层级上而言还是『悬浮』在主页面之上的。 所以如果在index.html中直接使用webview模式调用标签页,在标签页中打开新页面,新页面的顺序是跟index.html在同一层级上的(或介于两者之间),所以被遮盖。而demo中,tab-webview-main.html本身就是二级页面,新打开的页面跟tab-webview-main.html是同一个层级上的,所以不存在此问题。
不管分析的对不对,总之调整下append()和hide()的顺序,问题就能解决了!

这个问题困扰我两天了,百思不得其解。
模仿官方的例子使用webview模式选项卡,第二选项卡预加载list.html页面,通过ajax获得数据,拼装成列表,效果如图1,到这一步是完全正常的,然后在选项卡内直接用mui.openwindow()切换页面时,新打开的文章页打开后被显示在了list.html下面,注意图二底部。 而此时list.html还是不可点击的,很困惑究竟是谁覆盖了谁,以及怎么解决这个问题。
在首页设置一个按钮打开list.html,之后的切换没有这个问题的。后面的三个选项卡都是同样的情况。

2014-11-01 02:32 1 条评论 负责人:无 分享
已邀请:
DCloud_UNI_CHB

DCloud_UNI_CHB

是list中列表打开新页面,还是底下选项卡打开新页面?
另外,分析一下每个页面的zindex值;

  • Curtis (作者)

    是在list.html中打开新页面。

    此外还有,在主页中加一个按钮打开list.html,之后的跳转都是一切正常的,后面的三个页面都都是一样的问题。


    不知道该如何分析,我改成直接用plus.Webview.creat新建页面,然后用alert(WebviewStyle.zindex )或console.log(WebviewStyle.zindex),默认情况下都显示是undfined。

    2014-11-01 12:02

aaaa

aaaa

你的图标是用的其他的?

  • Curtis (作者)

    恩 用的font-awesome

    2014-11-01 13:03

  • aaaa

    回复 Curtis:怎么导入

    2014-11-03 16:18

  • Curtis (作者)

    回复 aaaa:从font-awesome官网下载字体包与样式文件,分别放在MUI项目的css和fonts文件夹里。 修改font-awesome前几行的路径改为字体所在的路径:src:url('../fonts/…')。

    然后就可以用了,图标样式参考官网,引用方法<span class="mui-icon fa fa-home"></span>。 加上mui-icon是为了控制图标大小和居中,省的自己写样式了。

    2014-11-04 01:11

DCloud_UNI_CHB

DCloud_UNI_CHB

你的附件不知为何在mac下打不开,我在hello mui中做了类似测试是没问题的,建议你再排查以下,若还是不行,可以将代码发我邮箱:cuihongbao@dcloud.io

  • Curtis (作者)

    谢谢,仔细diff了两个页面,确定不是写法上的问题后,把tabbar部分单独提出来作为index.html的子页面,问题解决,大致想通了webview的拼接方法和显示顺序了,慢慢消化中。

    2014-11-02 00:42

  • Curtis (作者)

    最近对mui慢慢熟悉之后,能确认这是demo中的一个bug,只是demo中tab-webview-main.html是作为二级页面的,所以无法重现问题。解决方法我写在问题描述中了,有空可以改下demo中的代码。

    2014-11-15 04:21

  • DCloud_UNI_CHB

    感谢您的分享,我想你的问题应该和这里的问题类似:http://ask.dcloud.net.cn/question/1041,我们反复测试过,已经确认是Android平台的一个bug了,正在修复中。

    2014-11-15 16:45

APP

APP

我也遇到这个问题,第一个选项卡的页面搜没有问题,后面的选项卡的页面,在进行页面跳转的时候就被阻挡。测试机型,小米2、htc g11、g12 华为p7,ios没有这个问题。

  • Curtis (作者)

    仔细diff了两个页面,确定不是写法上的问题后,把tabbar部分单独提出来作为index.html的子页面,问题解决,总之入口页面不要写东西就是了。

    2014-11-02 00:43

waxdz2015

waxdz2015

写成下面这样,貌似还是会被挡住啊
mui.init({
subpages:[{
url:'examples/tab-webview-subpage-chat.html',
id:'XXX',
styles:{
top: '46px',
bottom: '50px'
}

            },{  
              url:'tabbar.html',//下拉刷新内容页面地址  
              id:'tabbar',  
              styles:{  

                bottom:'0px'  
            }  
            }]  
          });  

tabbar页面里面
<nav>和<div id="Popover_0" class="mui-popover mui-bar-popover" style="width:100px;">

popover只能在tabbar很有限的高度里面展示,还是会被挡住

  • ifeiyan

    遇到同样的问题,请问最后如何解决的啊。。

    2015-03-24 10:22

guyskk

guyskk - https://blog.guyskk.com 艺爪AI、自宅创业

在mui.back.5 .js里面有这样一段:

if (wobj.id === plus.runtime.appid) { //首页  
    //首页不存在opener的情况下,后退实际上应该是退出应用;  
    //这个交给项目具体实现,框架暂不处理;  
    //plus.runtime.quit();    
}

把webview模式的tabbar放在首页,按返回键时不会退出app,而是把tabbar导航条隐藏。
所以要么自己处理返回事件,要么首页用mui.openwindow()打开tabbar页面

学习了

学习了 - 自学慢慢来,学习是无尽的。但是用功、受挫、bug也是必然

你好,作者。我现在正在用侧滑菜单做项目,但是用webview模式的选项卡。这得求dome了。

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