MUI-打开新页面，传参数，设置展示效果

最新推荐文章于 2022-04-25 10:14:35 发布

佛佛ง

最新推荐文章于 2022-04-25 10:14:35 发布

阅读量1.6k

点赞数 1

分类专栏： MUI

本文链接：https://blog.csdn.net/LzzMandy/article/details/85294347

版权

MUI 专栏收录该内容

36 篇文章 6 订阅

订阅专栏

主页面中打开新窗口设置：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script src="js/mui.min.js"></script>
	</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 mui-content-padded">
			<button id="btn" type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>
		</div>

		<script type="text/javascript">
			mui.init();
			var btn_obj = document.getElementById('btn');
			btn_obj.addEventListener('tap', function() {
				//打开新窗口
				mui.openWindow({
					url: 'child1.html', //需要打开页面的url地址 
					id: 'child1', //需要打开页面的url页面id
					styles: {
						top: '0px', //新页面顶部位置 
						bottom: '0px', //新页面底部位置 
						// width: "50%", //新页面宽度，默认为100% 
						// height: "50%", //新页面高度，默认为100% ...... 
					},
					extras: {
						name: 'lzz',
						age: '18',
						//自定义扩展参数，可以用来处理页面间传值 
					},
					show: { //控制打开页面的类型
						autoShow: false,
						//页面loaded事件发生后自动显示，默认为true 
						// aniShow: 'slide-in-right', //页面显示动画，默认为”slide-in-right“；  页面出现的方式 左右上下
						// aniShow: 'pop-in', //主页面跟着一起动
						aniShow: 'zoom-fade-out', //目前广泛使用的方式
						duration: '400' //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒； 
					},
					waiting: { // 控制 弹出转圈框的信息
						autoShow: true, //自动显示等待框，默认为true 
						title: '加载中...', //等待对话框上显示的提示内容 
						options: {
							width: '100px', //等待框背景区域宽度，默认根据内容自动计算合适宽度 
							height: '100px', //等待框背景区域高度，默认根据内容自动计算合适高度 ...... 
						}
					}
				});
			});
		</script>
	</body>
</html>

新页面中接收参数和模拟显示新页面

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</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">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 1
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 2
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 3
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 1
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 2
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 3
					</a>
				</li>
			</ul>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
			// 模拟定时器,模拟5s钟之后再执行
			setTimeout(function() {

				mui.plusReady(function() {
					var self = plus.webview.currentWebview();
					var name1 = self.name;
					var age1 = self.age;
					console.log(name1);
					console.log(age1);
					//1,关闭等待框
					plus.nativeUI.closeWaiting();
					// 打开等待框
					// plus.nativeUI.showWaiting("加载中...");//没有参数,只显示雪花图标
					// 2,显示子页面内容
					self.show("zoom-fade-out", 500) //参数表示以什么方式显示
				});
			}, 5000);
		</script>
	</body>

</html>

佛佛ง

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
MUI-打开新页面，传参数，设置展示效果

主页面中打开新窗口设置：&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-sca
复制链接

扫一扫