mui页面传值

Posted 2020-08-15

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了mui页面传值相关的知识，希望对你有一定的参考价值。

mui之事件绑定及自定义事件

点击li跳转并传值到下一页

 1 <body>
 2     <div class="mui-content">
 3         <ul id="lists" class="mui-table-view">
 4                 <li id="li1" class="mui-table-view-cell">
 5                     <a class="mui-navigate-right">
 6                         标题1
 7                     </a>
 8                 </li>
 9                 <li id="li2" class="mui-table-view-cell">
10                     <a class="mui-navigate-right">
11                          标题 2
12                     </a>
13                 </li>
14                 <li id="li3" class="mui-table-view-cell">
15                     <a class="mui-navigate-right">
16                          标题 3
17                     </a>
18                 </li>
19             </ul>
20     </div>
21 </body>
22    <script type="text/javascript" charset="utf-8">
23           mui.init();
24           mui.plusReady(function(){
25               //预加载新页面
26               var prePage = mui.preload({url:‘info.html‘,id:‘info.html‘});
27               //点击li
28               mui(‘#lists‘).on(‘tap‘,‘li‘,function(){
29                   //触发自定义事件  .fire(传值目标页面，自定义事件名称，所要传递的数据为json格式的数据)
30                   mui.fire(prePage,‘newEvent‘,{‘title‘:this.innerText,‘id‘:this.getAttribute(‘id‘)});
31                   //打开目标页面
32                   mui.openWindow({
33                       url:‘info.html‘,
34                       id :‘info.html‘
35                   });
36               });
37           });
38     </script>

目标页面 info.html

 1 <body>
 2         <header class="mui-bar mui-bar-nav">
 3             <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
 4             <h1 id="title1" class="mui-title"></h1>
 5         </header>
 6         <script src="js/mui.min.js"></script>
 7         <script type="text/javascript">
 8             mui.init();
 9             mui.plusReady(function(){
10                 window.addEventListener(‘newEvent‘,function(e){
11                     var titel1 = mui(‘#title1‘);
12                     titel1[0].innerText = e.detail.title;
13                     mui.toast(e.detail.id);
14                 });
15             });
16         </script>
17     </body>

以上是关于mui页面传值的主要内容，如果未能解决你的问题，请参考以下文章