webview模式底部选项卡，子页面打开新页面。返回选项卡时底部消失

分类：HTML5+

选项卡

入口main页面。配置的底部四个tab

在首页的header 点击搜索icon，打开搜索页面

打开搜索页面之后，在搜索结果页面展示搜索结果，并悬浮一个购物车的按钮，点击购物车按钮，跳转或返回至选项卡的第三个tab子页面购物车（cart.html）.

使用如下方法，第一个返回至选项卡的第一个tab子页面，第二个跳转到了购物车页面，但是没有显示底部的选项卡图标，何解？

2018-07-25 12:01 负责人:无分享

4 个回复

8***@qq.com

不能直接用open的方法我这边是这样处理的 main 页面去做一个监听监听别的页面过来的方法去执行点击按钮然后更改他的main图标的选中状态

劉先森 (作者)

下面是改进之后的代码，可以成功跳转到购物车，但是底部的Tab高亮没有更改过来，还是第一个tab的icon是高亮颜色，本打算用show之后的回调，但是show之后获取不到页面的任何元素，想请问一下，你在main页面是如何监听的，可否看下完整代码，谢谢

                      var main = plus.webview.getLaunchWebview();  

                            var current = plus.webview.currentWebview();  

                            var webviewIndex = plus.webview.getWebviewById('index.html');  

                            var webviewTypeList = plus.webview.getWebviewById('typeList.html');  

                            var webviewCart = plus.webview.getWebviewById('cart.html');  

                            var webviewUser = plus.webview.getWebviewById('userCenter.html');  

                            webviewIndex.hide();  

                            webviewTypeList.hide();  

                            webviewUser.hide();  



                            webviewCart.show();  



                            plus.webview.show(main,"slide-in-right",2000,function(){  

                                var cartWeb = document.getElementById("cart");  

                                var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");  

                                if(cartWeb !== current) {  



                                    $(current).removeClass('mui-active');  

                                    current.classList.remove('mui-active');  

                                    cartWeb.classList.add('mui-active');  

                                }  

                            })

2018-07-31 10:38

8***@qq.com

这个是其他页面得js去调用main页面得监听事件

var main = plus.webview.getWebviewById("main.html");

console.log(JSON.stringify(main))

mui.fire(main, 'click_task');

下面这个方法是在mian页面得js 因为页面得html在main页面所以你只能在mian页面去执行修改底部tab得选中状态

document.addEventListener("click_task", function(event) {

console.log("点击查看专题列表");

var btn = document.getElementsByClassName("mui-tab-item")[3];

mui.trigger(btn, 'tap');

var parent = btn.parentNode;

var chlidren = parent.children;

for(var i = 0; i < chlidren.length; i++) {

chlidren[i].classList.remove("mui-active");

}

chlidren[3].classList.add("mui-active");

})

2018-08-07 09:03