MUI webview模式实现底部选项卡切换（拷贝官方Demo）

于 2020-05-20 10:06:14 发布
阅读量964 收藏 3
点赞数
分类专栏： # 前端框架 文章标签： web app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42547014/article/details/106229271
版权

在这里插入图片描述
【共有5个html页面】

【1】.tab-webview-main.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title">首页</h1>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a id="defaultTab" class="mui-tab-item mui-active" href="tab-webview-subpage-about.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="tab-webview-subpage-chat.html">
				<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
				<span class="mui-tab-label">消息</span>
			</a>
			<a class="mui-tab-item" href="tab-webview-subpage-contact.html">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">通讯录</span>
			</a>
			<a class="mui-tab-item" href="tab-webview-subpage-setting.html">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</a>
		</nav>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			 //mui初始化
			mui.init();
			var subpages = ['tab-webview-subpage-about.html', 'tab-webview-subpage-chat.html', 'tab-webview-subpage-contact.html', 'tab-webview-subpage-setting.html'];
			var subpage_style = {
				top: '45px',
				bottom: '51px'
			};
			
			var aniShow = {};
			
			 //创建子页面，首个选项卡页面显示，其它均隐藏；
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				for (var i = 0; i < 4; i++) {
					var temp = {};
					var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
					if (i > 0) {
						sub.hide();
					}else{
						temp[subpages[i]] = "true";
						mui.extend(aniShow,temp);
					}
					self.append(sub);
				}
			});
			 //当前激活选项
			var activeTab = subpages[0];
			var title = document.getElementById("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;
				//显示目标选项卡
				//若为iOS平台或非首次显示，则直接显示
				if(mui.os.ios||aniShow[targetTab]){
					plus.webview.show(targetTab);
				}else{
					//否则，使用fade-in动画，且保存变量
					var temp = {};
					temp[targetTab] = "true";
					mui.extend(aniShow,temp);
					plus.webview.show(targetTab,"fade-in",300);
				}
				//隐藏当前;
				plus.webview.hide(activeTab);
				//更改当前活跃的选项卡
				activeTab = targetTab;
			});
			 //自定义事件，模拟点击“首页选项卡”
			document.addEventListener('gohome', function() {
				var defaultTab = document.getElementById("defaultTab");
				//模拟首页点击
				mui.trigger(defaultTab, 'tap');
				//切换选项卡高亮
				var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
				if (defaultTab !== current) {
					current.classList.remove('mui-active');
					defaultTab.classList.add('mui-active');
				}
			});
		</script>
	</body>

</html>

【2】.tab-webview-subpage-about.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			html,body {
				background-color: #efeff4;
			}
			.title{
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
		</style>
	</head>
	<body>
		<div class="mui-content">
			<div class="title">
				<p>这是webview模式选项卡的第1个子页面</p>
				<p>何谓webview模式？其实就是每个选项卡内容都是一个独立的webview，彼此之间互相独立、互不影响；
					对于较为复杂的业务系统，推荐使用该模式。</p>
				<p>基于webview模式的选项卡，支持原生加速的下拉刷新，点击第二个选项卡（“消息”），切换选项卡，体验下拉刷新；</p>
			</div>
		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
	</script>
</html>

【3】.tab-webview-subpage-chat.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			.title {
				padding: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				background-color: #fff;
			}
		</style>
	</head>

	<body>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<div class="title">
					这是webview模式选项卡中的第2个子页面，该页面展示一个支持下拉刷新、上拉加载的消息列表
				</div>
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 1</a>
					</li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 2</a>
					</li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 3</a>
					</li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 4</a>
					</li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 5</a>
					</li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 6</a>
					</li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 7</a>
					</li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 8</a>
					</li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 9</a>
					</li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 10</a>
					</li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 11</a>
					</li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 12</a>
					</li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 13</a>
					</li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 14</a>
					</li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 15</a>
					</li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 16</a>
					</li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 17</a>
					</li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 18</a>
					</li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 19</a>
					</li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 20</a>
					</li>
				</ul>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script>
			mui.init({
				swipeBack: false,
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for (var i = cells.length, len = i + 3; i < len; i++) {
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell';
						li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
						//下拉刷新，新纪录插到最前面；
						table.insertBefore(li, table.firstChild);
					}
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				}, 1000);
			}
			var count = 0;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for (var i = cells.length, len = i + 20; i < len; i++) {
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell';
						li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
						table.appendChild(li);
					}
				}, 1000);
			}
		</script>
	</body>

</html>

【4】.tab-webview-subpage-contact.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			html,body {
				background-color: #efeff4;
			}
			.title{
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			 .oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}
			
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}
	
			.oa-contact-avatar {
				width: 75px;
			}
			.oa-contact-avatar img {
				border-radius: 50%;
			}
			.oa-contact-content {
				width: 100%;
			}
			.oa-contact-name {
				margin-right: 20px;
			}
			.oa-contact-name, oa-contact-position {
				float: left;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="title">
				这是webview模式选项卡中的第3个子页面，该页面展示一个通讯录示例
			</div>

			<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
				<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="oa-contact-cell mui-table">
							<div class="oa-contact-avatar mui-table-cell">
								<img src="../images/60x60.gif" />
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix">
									<h4 class="oa-contact-name">叶文洁</h4>
									<span class="oa-contact-position mui-h6">董事长</span>
								</div>
								<p class="oa-contact-email mui-h6">
									yewenjie@sina.com
								</p>
							</div>
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="oa-contact-cell mui-table">
							<div class="oa-contact-avatar mui-table-cell">
								<img src="../images/60x60.gif" />
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix">
									<h4 class="oa-contact-name">艾AA</h4>
									<span class="oa-contact-position mui-h6">总经理</span>
								</div>
								<p class="oa-contact-email mui-h6">
									aaa@163.com
								</p>
							</div>
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="oa-contact-cell mui-table">
							<div class="oa-contact-avatar mui-table-cell">
								<img src="../images/60x60.gif" />
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix">
									<h4 class="oa-contact-name">罗辑</h4>
									<span class="oa-contact-position mui-h6">员工</span>
								</div>
								<p class="oa-contact-email mui-h6">
									luoji@126.com
								</p>
							</div>
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="oa-contact-cell mui-table">
							<div class="oa-contact-avatar mui-table-cell">
								<img src="../images/60x60.gif" />
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix">
									<h4 class="oa-contact-name">云天明</h4>
									<span class="oa-contact-position mui-h6">员工</span>
								</div>
								<p class="oa-contact-email mui-h6">
									ytm@163.com
								</p>
							</div>
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="oa-contact-cell mui-table">
							<div class="oa-contact-avatar mui-table-cell">
								<img src="../images/60x60.gif" />
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix">
									<h4 class="oa-contact-name">史强</h4>
									<span class="oa-contact-position mui-h6">员工</span>
								</div>
								<p class="oa-contact-email mui-h6">
									shiqiang@gmail.com
								</p>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
	</script>
</html>

【5】.tab-webview-subpage-setting.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			html,body {
				background-color: #efeff4;
			}
			.title{
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
		</style>
	</head>

	<body>
		<!--<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">设置</h1>
		</header>-->
		<div class="mui-content">
			<div class="title">
				这是webview模式选项卡中的第4个子页面，该页面展示一个常见的设置示例
			</div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						新消息通知
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						隐私
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						通用
					</a>
				</li>
			</ul>
			<ul class="mui-table-view" style="margin-top: 25px;">
				<li class="mui-table-view-cell">
					<a id="about" class="mui-navigate-right">
						关于mui
					</a>
				</li>
			</ul>
			<ul class="mui-table-view" style="margin-top: 25px;">
				<li class="mui-table-view-cell">
					<a style="text-align: center;color: #FF3B30;">
						退出登录
					</a>
				</li>
			</ul>
		</div>
		</style>
	</body>
	<script src="js/mui.min.js"></script>
	<script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		document.getElementById("about").addEventListener('tap',function () {
			//获得主页面的webview
			var main = plus.webview.currentWebview().parent();
			//触发主页面的gohome事件
			mui.fire(main,'gohome');
		});
	</script>
</html>
卑微猿同学
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mui webview选项卡 首次只加载第一个页面，其余点击触发在执行
Wisdom—Yoga—TaciturnKnight（WYT）
12-11 3017
开始做的webview 一进去就加载了所有页面，速度慢，而且弹出其他页面的弹窗，所有改进了方法，第一次进去只执行了第一个页面，其余点击后执行。代码如下： var aniShow = {}; //创建子页面，首个选项卡页面显示，其它均隐藏； mui.plusReady(function() { var self = plus.webview.currentWebview();
MUI，webview选项卡
triste anima
04-28 904
var subpage=['shouye.html','tel.html','email.html','shezhi.html']; //创建页面 var sub_style={ top:'0px', bottom:'51px' } var show={}; mui.plusReady(function(){ var ha
官网下的 demoMUI，a链接失效和点击事件失效
wujiu95的博客
06-04 1468
可以监听tap事件，然后执行document.location.href=this.href;跳转// 监听tap事件，解决 a标签 不能跳转页面问题 mui('body').on('tap','a',function(){document.location.href=this.href;}); 可以监听tap事件，然后执行点击事件// 监听tap事件，解决 a标签 不能跳转页面问题 mui(...
mui webview选项卡 首次只加载首页，点击触发打开页面
云上人间钦自赏
05-21 1万+
官方提供的demo是首次运行时全部的子页面都加载出来，只是不显示，实际使用中此功能有时不符要求，稍微改了下，点击对应的选项卡，再打开对应的页面 var self = plus.webview.currentWebview(); for (var i = 0; i < 1; i++) {//这里的4或者3改成1，只加载第一个页面 var sub = plus.webvie
MUI顶部选项卡的用法(tab-top-webview-main)详解
11-28
在本文中，我们将深入探讨MUI框架中的顶部选项卡（tab-top-webview-main）的用法，这是一个关键组件，用于创建具有类似原生APP体验的高性能前端应用。MUI提供了丰富的功能，包括下拉刷新、侧滑导航以及我们关注的...
mui选项卡切换和下拉刷新加载数据列表代码.zip
07-11
这是一款基于mui框架制作的选项卡切换和下拉刷新加载数据列表代码，手机移动端选项卡切换插件，触屏滑动下拉刷新代码。 js代码 [removed][removed] [removed][removed] [removed][removed] [removed] mui....
mui选项卡切换与下拉刷新加载数据列表代码.zip
07-11
var deceleration = mui.os.ios?0.003:0.0009; $('.mui-scroll-wrapper').scroll({ bounce: false, indicators: true, //是否显示滚动条 deceleration:deceleration }); $.ready(function() {
mui上拉加载+选项卡+ajax
12-25
`mui`框架的选项卡组件允许开发者创建可切换的视图，每个视图对应一个独立的内容区域。`mui.tabs()`方法用于初始化选项卡，可以通过监听`'show'`事件来处理内容的动态加载或更新。 `ajax`（异步JavaScript和XML）是...
HBuilder mui入门教程——（2）含tab选项卡的首页
热门推荐
永远行进
07-02 3万+
在上一篇文章中简单介绍了mui框架，并创建了第一个mui项目。在APP中，底部的选项卡菜单一般是各个APP都有的，在mui中怎样创建呢，下面就简单说下。极速创建【文件】->【新建】->【HTML文件】，然后在弹出窗口下面的“选择模板组：”中选中“mui底部选项卡（Webview模式）”。点击完成，就会自动创建一个带有默认页面的模板。 打开tab-webview-main.html可以在右侧看到
mui底部选项卡切换页面的两种模式
真是6的不行的博客
05-26 2584
两种模式的区别： 1.1 div模式   div模式是将所有子页面的内容，分别放置到主页不同的div中，当我们点击主页的不同选项卡时，切换不同div的显示。 这种方式显然要比加载子页的方式快很多，但是也显然不能承载很多布局的页面，毕竟要在一个主页中写入所有子页面的代码，显得不太现实。 1.2 WebView模式   而WebView模式则是将所有子页面都写入到不同的子页面中，再通过主页连接到一...
MUI 底部导航栏webview模式 按需加载
iwusan
04-10 3445
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalabl
MUI底部选项卡分类
WhoWrongsWhere的专栏
12-22 7505
底部选项卡-div模式：所谓div模式的选项卡，其实就是通过DIV模拟一个独立页面，通过div显示，隐藏模拟不同页面的切换，典型的SPA模式；这种模式适合简单业务系统，因为每个选项卡内容都要写在有一个DIV中，若逻辑复杂，会导致当前页面DOM结构繁杂，造成webview响应缓慢，甚至崩溃；因此若系统较复杂，需要下来刷新等操作，推荐使用webview模式选项卡。     底部选项卡-webview
用mui写的原生tab以及选项卡页面的拖动效果
Jxiaocai的博客
11-28 4437
废话少说上代码！ 1、首先我们创建原生的tab选项，目前这个很容易实现，在hbuilder中新建项目选中移动app模板选择 tab的配置项很简单官网有教程http://ask.dcloud.net.cn/article/12602 注意配置tags 时每个tags的id 要具有唯一性，配置图标的时候图标的代码要是Unicode 这个在官方文档里也有介绍就不多说了，有问题留言给我，下面是我的
简单实现mui-底部选项卡
xiaokanshijie的博客
09-13 4672
关于底部选项卡的问题我查看了很多种方法，试了无数次，终于找到适合自己的一种方法。 我在看官方的mui文档的时候发现并没有找到选项卡的位置，所以我并没有采纳可能是我太笨了吧接触的还少，先说说我原先是如何写底部选项卡的 &lt;nav class="mui-bar mui-bar-tab"&gt; &lt;a class="mui-tab-item mui-active" href="...
Hbuilder--mui--webview切换子页面问题
zhuyu19911016520
04-20 2万+
使用Hbuilder开发一个H5的app，在主页碰到一个tab选项卡切换页面问题？ 1.查看官方demo---tab-webview-main.html，给出的代码是一次性加载多个webview，点击tab选项卡时显示和隐藏webview 2.对上面1这种情况，感觉有点不符合。改动了一下，首次加载一个webview，点击时再次加载点击的webview，上代码 var subpages = [
mui 底部选项卡-div模式 实现跳转页面
最新发布
04-23
可以通过给每个选项卡绑定点击事件，在点击事件中使用JavaScript实现页面的跳转。具体代码如下： HTML代码： ```html <div class="mui-bar mui-bar-tab"> <a class="mui-tab-item" id="homeTab"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首页</span> </a> <a class="mui-tab-item" id="messageTab"> <span class="mui-icon mui-icon-chatboxes"></span> <span class="mui-tab-label">消息</span> </a> <a class="mui-tab-item" id="settingTab"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">设置</span> </a> </div> ``` JavaScript代码： ```javascript // 获取选项卡元素 var homeTab = document.getElementById("homeTab"); var messageTab = document.getElementById("messageTab"); var settingTab = document.getElementById("settingTab"); // 绑定点击事件 homeTab.addEventListener("tap", function() { // 跳转到首页页面 mui.openWindow({ url: "home.html", id: "home" }); }); messageTab.addEventListener("tap", function() { // 跳转到消息页面 mui.openWindow({ url: "message.html", id: "message" }); }); settingTab.addEventListener("tap", function() { // 跳转到设置页面 mui.openWindow({ url: "setting.html", id: "setting" }); }); ``` 以上代码实现了底部选项卡的点击事件，当用户点击不同的选项卡时，会跳转到相应的页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值