9***@qq.com
9***@qq.com
  • 发布:2017-02-22 21:26
  • 更新:2017-02-23 18:35
  • 阅读:1939

请教列表页和内容页的传参问题

分类:MUI

hbuilder是个不错的ide
可能是我的基础不好吧,调试程序的时候遇到很多问题。
列表页是这样写的:

<!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" />  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <title>测试</title>  
    <script src="js/mui.min.js"></script>  
    <link href="//ask.dcloud.net.cn/css/mui.min.css" rel="stylesheet"/>  
    <script type="text/javascript" charset="utf-8">  
        mui.init({  
            preloadPages:[{  
            id:'detail.html',  
            url:'detail.html'  
            }]  
        });  
    mui.plusReady(function() {  
        detail = plus.webview.getWebviewById('detail.html');  
        //点击新闻列表,获取当前列表项的id,并将该id传给新闻详情页面,然后打开新闻详情页面   
        mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){  
          //获取id  
          var id = this.getAttribute("id");  
          //传值给详情页面,通知加载新数据  
          mui.fire(detail,'getDetail',{id:id});  
          //打开新闻详情  
          mui.openWindow({  
            id:'detail',  
            url:'detail.html'  
          });  
        })   
    }); //plusReady结束  
    </script>  
    </head>  
    <body>  
        <div class="mui-content">  
        <ul class="mui-table-view">  
            <li id="1" class="mui-table-view-cell">  
                <a class="mui-navigate-right">Item 1</a>  
            </li>  
            <li id="2" class="mui-table-view-cell">  
                <a class="mui-navigate-right">Item 2</a>  
            </li>  
            <li id="3" class="mui-table-view-cell">  
                <a class="mui-navigate-right">Item 3</a>  
            </li>  
        </ul>  
        </div>  

    </body>  
</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" />  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <title>测试内容</title>  
    <script src="js/mui.min.js"></script>  
    <link href="//ask.dcloud.net.cn/css/mui.min.css" rel="stylesheet"/>  
    <script type="text/javascript" charset="utf-8">  
        mui.init({  

      });  

      mui.ready(function() {  
        mui.plusReady(function() {  
        //添加newId自定义事件监听  
        window.addEventListener('getDetail',function(event){  
        //获得事件参数  
        var id = event.detail.id;  
        var str = "参数" id;  
        //根据id向服务器请求新闻详情  
         $('#showdata').text(str);   
        })  
        }); //plusReady结束  
      });  
    </script>  
    </head>  
    <body>  
        <header class="mui-bar mui-bar-nav">  
        <span class="mui-icon-back mui-icon"></span>  
        <h1 class="mui-title">内容页</h1>  

        </header>  
        <div class="mui-content">  
            收到的值是:<span id="showdata"></span>  
        </div>  

    </body>  
</html>  

无论如何都取不到传递来的参数并显示,请问内容页的接收代码应该如何写?

谢谢解答

2017-02-22 21:26 负责人:无 分享
已邀请:
9***@qq.com

9***@qq.com (作者) - 职业程序员 业余音乐人

问题搞清楚了,我把我的解决办法发给大家看下,希望初学的朋友少走弯路
在详细页中代码如下

/添加自定义事件监听     
        window.addEventListener('getDetail',function(event){     
          //获得事件参数     
          var name = event.detail.name; //这个name出了函数就不起作用了    
          //根据id向服务器请求新闻详情     
          //console.log("extras:" + name);  
          var mb = document.getElementById('test');  
          mb.innerHTML=name;  
        });  

大伙自行将name脑补成id

该问题目前已经被锁定, 无法添加新回复