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>
无论如何都取不到传递来的参数并显示,请问内容页的接收代码应该如何写?
谢谢解答
1 个回复
9***@qq.com (作者) - 职业程序员 业余音乐人
问题搞清楚了,我把我的解决办法发给大家看下,希望初学的朋友少走弯路
在详细页中代码如下
大伙自行将name脑补成id