1、首页发送ajax请求获取数据，使用template对数据进行遍历显示
2、点击列表进入详情页，在首页的时候通过预加载详情页，传入id到详情页，再发送ajax请求显示数据
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/detail.css" rel="stylesheet" />
<script src="js/template-web.js" type="text/javascript"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav ">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">首页</h1>
</header>
<div class="mui-content">
<div id="slider" class="mui-slider banner" >
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img height="" src="http://placehold.it/400x300">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="https://img.drawand.com/201805230405337026.jpg">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<ul class="mui-table-view" id="list">
</ul>
<script id="jsUserListTempl" type="text/html">
{{each data list}}
{{if list.curr_suffix==" USDT"}}
<li class="mui-table-view-cell mui-collapse" >
<a class="mui-navigate-right" href="#">{{list.curr_a}}/{{list.curr_b}}</a>
<div class="mui-collapse-content" id="{{list.pair}}">
<p>币名:{{list.name_cn}}</p>
<p>最新价格:${{list.rate}}</p>
<p>供应量:{{list.supply}}</p>
<p>市值:{{list.marketcap}}</p>
</div>
</li>
{{/if}}
{{/each}}
</script>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
var mask=mui.createMask();//遮罩层
mui.plusReady(function(){
mui.ajax('https://data.gateio.io/api2/1/marketlist',{
// data:{id:id},
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
beforeSend: function() {
plus.nativeUI.showWaiting('正在加载');
mask.show();//显示遮罩层
},
complete: function() {
plus.nativeUI.closeWaiting();
mask.close();//关闭遮罩层
},
success:function(data){
//服务器返回响应，根据响应结果，分析是否登录成功；
console.log(JSON.stringify(data));
// console.log(data.data[0].name_cn);
var html=template('jsUserListTempl',data);
document.getElementById("list").innerHTML=html;
},
error:function(xhr,type,errorThrown){
//异常处理；
// console.log(type);
}
});
});
//初始化预加载详情页面
mui.init({
preloadPages:[{
id:'details.html',
url:'details.html'
}
]
});
var detailPage = null;
//添加列表项的点击事件
mui('.mui-table-view').on('tap', 'div', function(e) {
var id = this.getAttribute('id');
// alert(id);
//获得详情页面
if(!detailPage){
detailPage = plus.webview.getWebviewById('details.html');
}
console.log(detailPage);
//触发详情页面的newsId事件
mui.fire(detailPage,'detailIds',{
id:id
});
//打开详情页面
mui.openWindow({
id:'details.html'
});
});
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<script src="js/template-web.js" type="text/javascript"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title" id="header">详情页</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view" id="details">
</ul>
</div>
<script id="jsUserListTempl" type="text/html">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">兑换货币交易量:{{quoteVolume}}</a>
<a class="mui-navigate-right">交易量:{{baseVolume}}</a>
<a class="mui-navigate-right">买方最高价:{{highestBid}}</a>
<a class="mui-navigate-right">24小时最高价:{{high24hr}}</a>
<a class="mui-navigate-right">最新成交价:{{last}}</a>
<a class="mui-navigate-right">卖方最低价:{{lowestAsk}}</a>
<a class="mui-navigate-right">24小时最低价:{{low24hr}}</a>
</li>
</script>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
//添加newId自定义事件监听
window.addEventListener('detailIds',function(event){
//获得事件参数
var id = event.detail.id;
//根据id向服务器请求新闻详情
// alert(id);
var mask=mui.createMask();//遮罩层
mui.plusReady(function(){
mui.ajax('https://data.gateio.io/api2/1/ticker/'+id,{
// data:{id:id},
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
beforeSend: function() {
plus.nativeUI.showWaiting('正在加载');
mask.show();//显示遮罩层
},
complete: function() {
plus.nativeUI.closeWaiting();
mask.close();//关闭遮罩层
},
success:function(data){
//服务器返回响应，根据响应结果，分析是否登录成功；
console.log(JSON.stringify(data));
// console.log(data.data[0].name_cn);
var html=template('jsUserListTempl',data);
document.getElementById("details").innerHTML=html;
},
error:function(xhr,type,errorThrown){
//异常处理；
// console.log(type);
}
});
});
});
</script>
</body>
</html>
3507
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
