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

古城微笑少年丶 2022-06-17 07:47 218阅读 0赞

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

![Center][]

[Center]: /images/20220617/979b71eb32ea457abe031bdc5fbeee4e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，218人围观）

还没有评论，来说两句吧...

相关阅读

相关 wpf切换页面

两种方案 1、使用Page，点击每个page进行切换 2、直接把控件写在窗体中，然后隐藏，需要显示的时候在显示出来。 ![watermark_type_ZmFuZ3poZ

怼烎@/ 2024年02月19日 21:42/ 0 赞/ 10 阅读

相关解决layuimini 切换页面数据不刷新问题

问题描述使用的layuimini后台模板，第一次点击左侧菜单栏的时候会刷新页面，然后切换别的菜单之后，再次点击原页面，页面不会刷新，例如当我每成功审核一条数据，跳转到审

电玩女神/ 2022年12月03日 13:15/ 0 赞/ 559 阅读

相关切换页面_Flutter 之页面切换（命名路由）

命名路由之前的文章介绍过基本路由，使用基本路由相对简单灵活，适用于应用中页面不多的场景。而在应用中页面比较多的情况下，再使用基本路由，会导致大量的重复代码，此时使用命名路由

古城微笑少年丶/ 2022年11月19日 12:42/ 0 赞/ 207 阅读

相关【前端】监听页面切换--浏览器页面间切换，路由切换，导航守卫页面刷新或关闭

前提，PC端应用一，监听浏览器页面间切换场景：浏览器某一个页面A，PC端页面B，页面AB间切换方案： 1.使用vue-visibility-change 安装：

比眉伴天荒/ 2022年09月02日 05:20/ 0 赞/ 526 阅读

相关页面切换

[http://blog.csdn.net/zhaoyw2008/article/details/17013431][http_blog.csdn.net_zhaoyw20

比眉伴天荒/ 2022年08月07日 03:36/ 0 赞/ 155 阅读

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

使用Hbuilder开发一个H5的app，在主页碰到一个tab选项卡切换页面问题？ 1.查看官方demo---tab-webview-main.html，给出的代码是一次性加

古城微笑少年丶/ 2022年06月17日 07:47/ 0 赞/ 219 阅读

相关 jQuery 页面语言切换

上效果图： ![70][] 源码如下： <!-- author:helang Email:helang.love@qq.com

清疚/ 2022年05月07日 03:52/ 0 赞/ 241 阅读

相关 iOS 页面切换

关于页面切换有很多种方法，我这里只介绍我用的一种：利用addSubview方法切换视图 example: //跳转到投票主页 zcListVie

àì夳堔傛蜴生んèń/ 2022年03月11日 03:58/ 0 赞/ 217 阅读

相关框架页面中，从子页面刷新父页面问题解决

上次做的一个项目的主页面是那种框架的效果，左边点什么右边的子页面对应各个页面。我开始要做的功能是当点击某个连接时，且ｓｅｓｓｉｏｎ超时的时候．右边就出来一个登陆错误页面

男娘i/ 2021年09月26日 02:46/ 0 赞/ 445 阅读

相关 vue页面切换效果（slide效果切换）

最近碰到一个需求，单页应用里面页面切换的效果需要做成跟轮播图滑动slide一样，让这个页面在切换时感觉是一个页面。反复琢磨的vue里面的transition，最终将实现的核心

曾经终败给现在/ 2021年09月19日 19:24/ 0 赞/ 744 阅读