Hbuilder--mui--webview切换子页面问题
使用Hbuilder开发一个H5的app,在主页碰到一个tab选项卡切换页面问题?
1.查看官方demo---tab-webview-main.html,给出的代码是一次性加载多个webview,点击tab选项卡时显示和隐藏webview
2.对上面1这种情况,感觉有点不符合。改动了一下,首次加载一个webview,点击时再次加载点击的webview,上代码
var subpages = ["a.html", "b.html", "c.html", "d.html"]; var subpage_style = { top: "45px", bottom: "51px" }; var aniShow = {}; mui.plusReady(function(){ //从本地缓存中获取用户令牌信息,通过令牌可以获取用户信息 var userToken = window.localStorage.getItem("userToken"); if(userToken == null || userToken == "" || userToken.length == 0){ goToLogin(); } var self = plus.webview.currentWebview(); for (var i = 0; i < 1; i++) {//这里只加载第一个页面 var sub = plus.webview.create(subpages[i], subpages[i], subpage_style); if (i > 0) { sub.hide(); } self.append(sub); } }); var activeTab = subpages[0]; var title = getById("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; var self = plus.webview.currentWebview(); var sub = plus.webview.create(targetTab, targetTab, subpage_style); self.append(sub); //隐藏当前; //plus.webview.hide(activeTab);//这里应该是关闭页面,不知道隐藏与关闭区别有多大 plus.webview.close(activeTab); //更改当前活跃的选项卡 activeTab = targetTab; });
效果切换正常,和webview全部加载出来的效果比较时,这种一个个显示子页面的方式有一定的延时,时长倒是不长。
声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。