MUI 反向传参

xiaoxiao2021-02-28  113

MUI中点击按钮返回上一级并传递参数,需要通过自定义事件来实现,下面就是我通过实践以及踩了很多坑的结果

1.MUI 反向传参先弄明白ID是谁的,官网给的自定义时间如下,但也没有明确的指出

2.反向传递参数,最少是两个页面,一个是入口页面,一个是进入页面,不过如果在项目中,通常是三个页面之间的数据传递,

  下面跟大家说下两个页面的传递,相信大家也看到过网上很多类似的

2.1接收参数的页面

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="css/mui.css" rel="stylesheet" /> <script src="js/mui.js"></script> <script src="js/jquery-3.2.1.js"></script> </head> <body> <a href="javascript:void(0);" class="jump" style="font-size: 50px;display: block;padding-top: 144px;margin-bottom: 100px;">跳转到B页面</a> <div class="a1" style="font-size: 50px;">返回回来的值是------ <font id="ccc" style=" font-size:50px;color:#2AC845"></font> </div> <div style=" font-size:50px ; text-align: center; display: block; margin: 50px 0 0 0;">a.html页面</div> </body> <script> mui.init(); $(".jump").on("tap", function() { mui.openWindow({ url: "two.html", id: "two" }) }) //接受数据 function fun1(e) { var val = e.detail.aaaa; console.log(val); $(".a1 font").html(val) }; //自定义窗体事件 doit 要和b页面定义的 事件名称一致 window.addEventListener('doit', fun1); </script> </html> 2.2传递参数的页面 <!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.css" rel="stylesheet" /> <script src="js/mui.js"></script> <script src="js/jquery-3.2.1.js"></script> <body> <input type="text" id="text"> <a href="javascript:void(0)" class="jump">返回</a> <div style=" font-size:50px ; text-align: center; display: block; margin: 50px 0 0 0;">b.html页面</div> </body> <script> mui.init(); //发送数据 $(".jump").on('tap',function(){ var view=plus.webview.getWebviewById("HBuilder");//这个HBuilder在只有两个页面之间的时候可以用 mui.fire(view,'doit',{ aaaa:$('input').val() }); mui.back(); }) </script> </head> </html> 我们来说说这个 HBuilder 这个ID,这个ID只有在两个页面的时候可以生效,传递参数到上个页面,如果是两个页面那么不需要改

3.下面是需要三个页面的反向传递参数,这也是我在项目中使用的

3.1 第一个页面不再是入口文件了,而是爷爷页面,通常在 MUI 中跳转页面是打开新页面,A标签href跳转官网并不是推荐,所以这个ID就是需要接受数据的ID;或者可以说是子页面需要的那个ID;

下面是 父级ID 的查看之处,在爷爷页面

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="css/mui.css" rel="stylesheet" /> <script src="js/mui.js"></script> <script src="js/jquery-3.2.1.js"></script> </head> <body> <a href="javascript:void(0);" class="aaa" style="font-size: 50px;display: block;padding-top: 144px;margin-bottom: 100px;">跳转到需要接受数据的页面</a> <div style=" font-size:50px ; text-align: center; display: block; margin: 50px 0 0 0;">index.html页面</div> </body> <script> mui.init(); $(".aaa").on("tap",function() { mui.openWindow({ url: "inde.html", id: "inde" //这个ID才是子页面需要的ID }) }); </script> </html> 3 .2  下面看下  子页面需要传递参数是需要的ID

<!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.css" rel="stylesheet" /> <script src="js/mui.js"></script> <script src="js/jquery-3.2.1.js"></script> <body> <input type="text" id="text"> <a href="javascript:void(0)" class="jump">返回</a> <div style=" font-size:50px ; text-align: center; display: block; margin: 50px 0 0 0;">b.html页面</div> </body> <script> mui.init(); //发送数据 $(".jump").on('tap',function(){ var view=plus.webview.getWebviewById("inde");//这个ID,就是爷爷页面跳转时 赋给父页面的ID mui.fire(view,'doit',{ aaaa:$('input').val() }); mui.back(); }) </script> </head> </html> 3.3 父页面,需要接受数据的页面

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="css/mui.css" rel="stylesheet" /> <script src="js/mui.js"></script> <script src="js/jquery-3.2.1.js"></script> </head> <body> <a href="javascript:void(0);" class="jump" style="font-size: 50px;display: block;padding-top: 144px;margin-bottom: 100px;">跳转到B页面</a> <div class="a1" style="font-size: 50px;">返回回来的值是------ <font id="ccc" style=" font-size:50px;color:#2AC845"></font> </div> <div style=" font-size:50px ; text-align: center; display: block; margin: 50px 0 0 0;">a.html页面</div> </body> <script> mui.init(); $(".jump").on("tap", function() { mui.openWindow({ url: "two.html", id: "two" }) }) //接受数据 function fun1(e) { var val = e.detail.aaaa; console.log(val); $(".a1 font").html(val) }; //自定义窗体事件 doit 要和b页面定义的 事件名称一致 window.addEventListener('doit', fun1); //如果需要接收多个数据,只需要改变自定义事件名称,和函数fun1的名称即可 </script> </html> 以上代码只有在真机测试上才能看到效果

下面来说一说怎么回事,子页面需要一个ID,这个ID就像是索引一样,指引子页面需要返回的数据在那个页面接收一样,其次那父页面的ID,其实一早就在咱们跳转这个父页面的时候就已经赋值给父页面了,就是URL,下面的那个ID,然后只需要吧这个 ID 给子页面,那么 MUI 就知道反向传递的页面了

转载请注明原文地址: https://www.6miu.com/read-19330.html

最新回复(0)