MUI-页面传参数
点击第一个页面的标签,跳转到第二个页面,把第一个页面的值也传往目标页面
现在提供两种实现方式
注意:需要在手机运行才可以,用电脑浏览器可能不支持。
第一种方式 页面已创建,通过自定义事件传值
first.html
<!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>HTML5,MUI方式自定义事件页面传值</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init({
preloadPages: [{//预加载目标页面
'url': 'second.html',
'id': 'second.html'
}]
});
window.onload = function() {
var Page = null;
document.getElementById("a1").addEventListener('tap', function() {
if (!Page) {
Page = plus.webview.getWebviewById('second.html');
}
mui.fire(Page, 'show', {
id: 'id1', //传往second.html的值
name: 'name2' //传往second.html的值
});
mui.openWindow({ //目标页面
id: 'second.html',
});
});
}
</script>
</head>
<body>
<a id="a1">跳转</a>
</body> </html>
second.html
<!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>HTML5,MUI方式自定义事件页面传值</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
//添加newId自定义事件监听
window.addEventListener('show', function(event) {
//获得事件参数
var id = event.detail.id;
var name = event.detail.name;
alert(id);
alert(name);
})
</script>
</head>
<body>
</body>
</html>
第二种方式 页面初始化时,通过扩展参数传值;
first.html
<!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>mui页面间传值</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
var param = { //这是要传的数据
userId: 'userId11111111111',
toKen: 'toKen',
userRole: 'userRole'
}; function SendPage(pageId, linkUrl, pageParam) {
mui.openWindow({//目标页面
url: 'second.html',
id: 'second.html',
extras: param
});
}
</script>
</head>
<body>
<a onclick="SendPage()">跳吧</a>
</body>
</html>
second.html 目标页面
<!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>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.plusReady(function() {
var self = plus.webview.currentWebview();
alert(self.userId);
});
</script>
</head>
<body>
</body>
</html>
MUI-页面传参数的更多相关文章
- js页面传参数时,参数值包含特殊字符的处理
js页面传参数时,参数值包含特殊字符应该怎么处理,解决方法就是利用js的escape函数,这个函数在解决中文乱码等方面应用的比较广泛.推荐使用. 工作中遇到的小问题,一个页面中通过window.sho ...
- ASP.net<a>标签跨页面传参数
//在goodsDetail.aspx页面接收 <script> //加载事件 $(function () { //第一种方式 var id=GetQueryString("id ...
- layUI不同页面传参数
//页面一的方法 function modifyHotSearch(id){ layer.open({ type:2, title:"修改热门搜索", area: ['600px' ...
- 工作总结 mvc 调页面传参数 参数值会一直保存 在这个页面上的
意思是 两个页面均可以 获取到id 和 goodsType 都可以获取 id goodsType post 的 还多带点属性值 form data 页面上带过去的 (新增 编辑)
- 父页面(JSP页面)传参数到子页面(JSP页面)
父页面(JSP页面)传参数到子页面(JSP页面) 1.父页面传参数到子页面 //JavaScript代码 $.ajax({ type:"POST", uri:"../st ...
- vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- vue路由传参页面刷新参数丢失问题解决方案
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- 用js把数据从一个页面传到另一个页面
用js把数据从一个页面传到另一个页面的层里? 如果是传到新页面的话,你网站基于什么语言开发直接用get或者post获取,然后输出到这个层 通过url传参 如果是HTML页面的话JS传到新页面就wind ...
- Spring 向页面传值以及接受页面传过来的参数的方式
来源于:http://www.cnblogs.com/liuhongfeng/p/4802013.html 一.从页面接收参数 Spring MVC接收请求提交的参数值的几种方法: 使用HttpSer ...
- html 跳转页面传参、点击获取DOM参数
虽然现在前端框架已经很多,尤其是几大流行框架,比如Vue,React,Angular 等,已经去DOM化,但是还是有很多公司仍在使用 HTML + CSS + JS . 这里记载一下用到的HTML传参 ...
随机推荐
- springboot基础(随笔)
<parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot ...
- c语言进阶11-经典算法代码
重要算法一览 #include "stdio.h" #include "stdio.h" void main() { int a,b,c,i,n; int x, ...
- HashMap源码之resize
final Node<K,V>[] resize() { //创建一个Node数组用于存放table中的元素, Node<K,V>[] oldTab = table; //获取 ...
- python函数对象-命名空间-作用域-02
函数对象 函数是第一对象: # 函数名指向的值可以被当做参数传递 函数对象的特性(*****灵活运用,后面讲装饰器会用到) 函数名可以像变量一样被传递 # 变量可以被传递 name = 'jason' ...
- 小白学python-day03-系统位数、变量、用户输入、if else
今天是day03,以下是学习总结. 但行努力,莫问前程. ----------------------------------------------------------------------- ...
- Mysql 学校信息管理系统
1.创建数据库语句: #创建数据库 CREATE DATABASE `schoolDB`; USE `schoolDB`; #创建学生表 CREATE TABLE `student`( `sid` I ...
- webgl图库研究(包括BabylonJS、Threejs、LayaboxJS、SceneJS、ThingJS等框架的特性、适用范围、支持格式、优缺点、相关网址)
3D图库框架范围与示例 摘要: 为实现企业80%以上的生产数据进行智能转化,在烟草.造纸.能源.电力.机床.化肥等行业,赢得领袖企业青睐,助力企业构建AI赋能中心,实现智能化转型升级.“远舢文龙数据处 ...
- netty使用EmbeddedChannel对channel的出入站进行单元测试
一种特殊的Channel实现----EmbeddedChannel,它是Netty专门为改进针对ChannelHandler的单元测试而提供的. 名称 职责 writeInbound 将入站消息写到E ...
- 几个linux下的命令
sudo apt-get insall -f 修复依赖关系 sudo apt-get update 更新源 sudo apt-get upgrade 更新已经安装的包 sudo apt-get ...
- Java 设置PDF文档浏览偏好
在查看PDF文档时,可进行一些浏览偏好设置,例如是否全屏浏览.隐藏或显示菜单栏/工具栏.设置页面布局模式等,下面将通过Java编程的方式来演示如何设置. 使用工具: Free Spire.PDF fo ...