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全部加载出来的效果比较时,这种一个个显示子页面的方式有一定的延时,时长倒是不长。
声明:该文观点仅代表作者本人,入门客AI创业平台信息发布平台仅提供信息存储空间服务,如有疑问请联系rumenke@qq.com。
