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

最新推荐文章于 2025-06-30 11:22:55 发布

闪耀的瞬间

最新推荐文章于 2025-06-30 11:22:55 发布

阅读量2w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： App 文章标签： app

本文链接：https://blog.youkuaiyun.com/zhuyu19911016520/article/details/70270731

App 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种在HBuilder中开发H5应用时优化tab选项卡切换的方法。通过仅预加载首个页面并在用户选择其他选项卡时按需加载对应页面来减少初始加载时间。此方法虽能改善用户体验，但可能会导致选项卡切换时出现轻微延迟。

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