使用tab-webview模式时出现的两个问题

分类：MUI

选项卡 Webview

接触MUI框架一周，开始做项目。出现的两个问题一直在论坛、官方文档、度娘转了好几天了，但得不到确切的解决方案，只有个人推测的BUG原因。p.s.在Hbuilder基座以及打包都存在这两个问题，控制台均未报错。

代码内容均使用MUI-Demo中examples/tab-webview-main.html内代码进行移植，并未修改js逻辑。
手机平台：红米Note3 MIUI7.3.3.0

正常示例图：

Q1示例图：

Q1：在tab页面渲染完成时，手机上迅速点击（200~500ms左右）非“推荐”的其他选项卡，就会出现无法切换到“推荐”的subpage页面问题。子webview内监听的backbutton与menubutton失效，也就是说tab页面的subpages没有进行渲染，或者说plus.webview.create()函数没有生效。

G1:推测是因为在200ms~500ms这段时间内plusready()还未加载完毕导致的这个问题，只报过一次plus is not defined。但是在Q1实例图中测试每个选项卡点击时均未报plus is not defined。那就是说这块代码

//选项卡点击事件  
            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;  
            });

要么导致选项卡点击事件先于上面的plus.webview.create()创建subpages发生，要么导致我所有4个webview全部隐藏了，而且监听返回键菜单键事件也不响应。

这一个问题在http://ask.dcloud.net.cn/question/6485 中没有看到@DCloud_MUI_CHB的详细解答,大家有什么想法就在评论里面Mark出来吧，求Comments。

Q2示例图：

Q2：这是一个偶发BUG，个人测试后发现大概每打开8~10次App就会出现，点击其中的某一个或者全部选项卡（包括‘推荐’页的自动trigger点击），得到这样父webview的header与bar-tab被部分遮盖的效果。tab显示部分仍然可以点击。

G2：在尝试了http://ask.dcloud.net.cn/question/855 的方法后，代码块修改成

//选项卡  
                var self = plus.webview.currentWebview();  
                for (var i = 0; i < 4; i++) {  
                    var temp = {};  
                    var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);  
                    self.append(sub);  
                    if (i > 0) {  
                        sub.hide();  
                    } else {  
                        temp[subpages[i]] = "true";  
                        mui.extend(aniShow, temp);  
                    }  
                }

偶发出现父webview被覆盖的情况频度感觉上降低了，但是依然存在。
又参考了http://ask.dcloud.net.cn/question/6073的评论，没有得出确切的代码解决方案，大家有什么想法就在评论里面Mark出来吧，求Comments。

项目demo包已发至:cuihongbao@dcloud.io，@DCloud_MUI_CHB 有时间帮忙debug一下~辛苦啦！
欢迎大家分享自己的问题与想法~

2016-06-25 05:35 负责人:无分享

4 个回复

BoredApe - 有问题就会有答案。

此问题是之前版本的bug,请升级hbuilder到最新版(7.3.0),升级之后删除手机中之前的基座重新真机调试

MUI_Charles (作者)

最新版版本号：7.2.2.201606152019 官网只有这个呀要等7.3.0发布？0.0

2016-06-27 21:36
BoredApe

不是7.3 你这个就是最新版.. 发个测试工程给我.说明下重现步骤

2016-06-28 09:54
MUI_Charles (作者)

回复 BoredApe:给个email等下发过去

2016-06-28 12:44

耐心

你的这个问题解决了吗？

MUI_Charles (作者)

修改了demo里的代码算是解决了

2016-11-07 14:28

MUI_Charles (作者)

不知道到底是什么问题引起的可能是webview性能问题

这是原demo的代码

var subpages = ['tab-webview-subpage-about.html', 'tab-webview-subpage-chat.html', 'tab-webview-subpage-contact.html', 'tab-webview-subpage-setting.html'];  
            var subpage_style = {  
                top: '45px',  
                bottom: '51px'  
            };  

            var aniShow = {};  

             //创建子页面，首个选项卡页面显示，其它均隐藏；  
            mui.plusReady(function() {  
                var self = plus.webview.currentWebview();  
                for (var i = 0; i < 4; 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;  
            });

修改后

var dIndex = 0;  
                    var subpages = ['index.html', 'contact.html', 'work.html', 'mine.html'];  
                    var subpage_style = {  
                        top: '65px',  
                        bottom: '51px'  
                    };  
                    var aniShow = {};  

                    //状态栏预留  
                    $("#title").css("margin-top", plus.navigator.getStatusbarHeight() + "px").show()  

                    var self = plus.webview.currentWebview();  
                    //禁用侧滑  
                    self.setStyle({  
                        popGesture: 'none'  
                    })  
                    for(var i = 0; i < 4; i++) {  
                        var temp = {};  
                        var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);  
                        sub.setStyle({  
                            "scrollIndicator": "none"  
                        })  
                        self.append(sub);  
                    }  

                    var defaultTab = plus.webview.getWebviewById(subpages[dIndex]);  
                    defaultTab.addEventListener('loaded', function() {  
                        defaultTab.show();  
                    })  

                    //当前激活选项  
                    var activeTab = subpages[dIndex];  
                    var title = document.getElementById("title");  

                    //选项卡点击事件  
                    mui('.mui-bar-tab').on('tap', 'a', function(e) {  
                        var targetTab = this.getAttribute('href');  

                        //更换标题  
                        title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;  
                        if(!plus.webview.getWebviewById(targetTab)) {  
                            var sub = plus.webview.create(targetTab, targetTab, subpage_style);  
                            self.append(sub)  
                        } else {  
                            if(targetTab == activeTab) {  
                                return;  
                            }  
                            //若为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, "none", 300);  
                            }  
                            //隐藏当前;  
                            plus.webview.hide(activeTab);  
                            //更改当前活跃的选项卡  
                            activeTab = targetTab;  
                        }  

                    });

感觉也是暂时性的解决办法也只能这样了

3***@qq.com

能否请问一下我的tab-webview根本不加载子页面是那里出错了？

2017-04-02 22:21

耐心

你看看你的子页面里面有没有设置setStyle，如果有，可能是这个原因造成的子页面会遮盖父页面

MUI_Charles (作者)

不是setStyle的问题那个是我自己的需求加上去的 //禁用侧滑那一小段忽略就行了

2016-11-08 17:34
耐心

回复 MUI_Charles:恩恩，你们app上线了吗？

2016-11-08 17:41

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

使用tab-webview模式时出现的两个问题

4 个回复

公告

相关问题

使用tab-webview模式时出现的两个问题

与内容相关的链接

4 个回复

公告

相关问题