mui 页面传值
页面 传值 mui
2023-09-11 14:15:30 时间
点击第一个页面的标签,跳转到第二个页面,把第一个页面的值也传往目标页面
现在提供两种实现方式
注意:需要在手机运行才可以,用电脑浏览器可能不支持。
第一种方式 页面已创建,通过自定义事件传值
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是目标页的自定义事件 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>
相关文章
- Silverlight实用窍门系列:51.Silverlight页面控件的放大缩小、Silverlight和Html控件的互相操作【附带源码实例】
- JS自动缩放页面图片
- 两个html页面之间传值
- Win10系列:JavaScript页面导航
- position 属性和 z-index 属性对页面节点层级影响的例子
- Office PDF如何旋转页面之后保存
- layui: 子iframe关闭/传值/刷新父页面
- ASP.NET通过更改Url进行页面传值
- python抽取指定url页面的title方法
- PHP中获取当前页面的完整URL、PHP URL处理、获取不带扩展名的文件名
- 2个页面间不通过Session与url的传值方式。
- RF使用ie浏览器访问页面,浏览器启动只显示This is the initial start page for the WebDriver server,页面访问失败
- Python Django开发案例:显示登录页面
- 请讲一下浏览器从接收到一个URL,到最后展示出页面,经历了哪些过程
- [FAQ] uni-app 导航路由切换时如何强制刷新页面?
- SAP UI5 应用开发教程之七十七 - SAP UI5 动态页面路由的高级用法:路由记录 routes 和 target 的一对多关系试读版
- ajax不跳转页面提交表单
- atitit. js 跨界面 页面 web cs 传值方法总结
- atitit. js 跨界面 页面 web cs 传值方法总结
- javascript-js模拟form页面提交跳转
- Spring MVC页面重定向
- 关于Windows页面错误的一些基础概念