牛骨文教育服务平台(让学习变的简单)
博文笔记

Hbuilder--mui--webview切换子页面问题

创建时间:2017-04-20 投稿人: 浏览次数:8162

使用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全部加载出来的效果比较时,这种一个个显示子页面的方式有一定的延时,时长倒是不长。




声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。