APICloud成长记录三,使用数据云 ,原始方式进行拿数据
<span style="font-family:Microsoft YaHei;font-size:14px;"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>APICloud APP</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,
body {
height: 100%;
background: #f0f0f0;
}
.h1 {
height: 1px;
}
.h80 {
height: 80px;
}
.h40 {
height: 40px;
line-height: 40px;
}
.h20 {
height: 20px;
}
.h10 {
height: 10px;
background: #f0f0f0;
}
.hightitem {
background-color: #fff;
}
.sectionTitle {
height: 40px;
line-height: 40px;
padding-left: 10px;
vertical-align: top;
font-size: 12px;
color: #999;
}
.row {
display: -webkit-box;
display: -webkit-flex;
}
.col {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
position: relative;
}
.col img {
position: absolute;
right: 0;
width: 80px;
top: 0;
}
.col .matrix3 {
display: table;
height: inherit;
width: 100%;
}
.matrix3 .matrixcell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.petty {
height: 50%;
width: 100%;
float: left;
}
.brb {
border-bottom: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
}
.bb {
border-bottom: 1px solid #e0e0e0;
}
.br {
border-right: 1px solid #e0e0e0;
}
.section02 .col img {
position: relative;
}
.section02 .col .petty {
text-align: center;
font-size: 20px;
padding-top: 10px;
}
.section02 .col .petty img {
width: 40%;
margin-top: 10px;
}
.section02 .logocover {
text-align: center;
margin-top: 20px;
}
.section02 .logocover img {
width: 80%;
}
.section02 .title {
font-size: 20px;
margin-top: 10px;
}
.section02 .subtitle {
font-size: 14px;
margin-top: 5px;
color: #666;
}
.section03 .matrixcell {
text-align: left;
margin-left: 10px;
}
.section03 .col img {
position: absolute;
right: 10px;
top: 10px;
left: inherit;
width: 50px;
}
.section03 .col {
height: 80px;
}
.section03 .col .title {
margin-left: 10px;
font-size: 18px;
}
.section03 .col .subtitle {
font-size: 13px;
color: #666;
margin-left: 10px;
margin-top: 10px;
}
.card-list {
position: relative;
height: auto;
}
.card {
border: 1px solid #e0e0e0;
margin: 0 5px;
}
.card .upimg {
position: relative;
}
.card .upimg img {
width: 100%;
height: 150px;
}
.card .title,
.card .subtitle {
font-size: 14px;
bottom: 25px;
color: #fff;
margin-left: 10px;
margin-top: 10px;
}
.card .hot {
position: absolute;
bottom: 5px;
margin-left: 10px;
}
.card .hot span {
color: #fff;
}
.card .downinfo {
padding: 10px;
font-size: 14px;
color: #666;
line-height: 20px;
}
.card .info {
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
bottom: 0px;
width: 100%;
padding-bottom: 5px;
}
.viewed-eye .eye {
display: inline-block;
width: 16px;
height: 16px;
background: url(../image/eye.png) no-repeat;
background-size: 11px auto;
margin-bottom: -3px;
}
.card .img_wrap {
position: absolute;
right: 0;
bottom: 10px;
}
.card .subtitle {
font-size: 12px;
margin-top: 5px;
}
.card .viewed-eye {
background-color: #000;
padding: 5px;
border-radius: 20px;
color: #fff;
font-size: 14px;
}
.highlight {
opacity: 0.7;
}
</style>
</head>
<body>
<div class="h1"></div>
<div class="row hightitem section02">
<div class="col br" tapmode="highlight" onclick="fnOpenSearchResult('KTV')">
<div class="matrix3">
<div class="matrixcell">
<div class="title">身边热闹</div>
<div class="subtitle">发现新玩法</div>
</div>
</div>
<div class="logocover"><img src="../image/find/logo_01.png"></div>
</div>
<div class="col br" tapmode="highlight" onclick="fnOpenSearchResult('家居')">
<div class="matrix3">
<div class="matrixcell">
<div class="title">品牌优惠</div>
<div class="subtitle">热门快餐5折起</div>
</div>
</div>
<div class="logocover"><img src="../image/find/logo_02.png"></div>
</div>
<div class="col">
<div class="petty bb" tapmode="highlight" onclick="fnOpenSearchResult('影视')">
看排行
<div class=""><img src="../image/find/logo_03.png">
</div>
</div>
<div class="petty" tapmode="highlight" onclick="fnOpenSearchResult('俱乐部')">
查商区
<div class=""><img src="../image/find/logo_04.png">
</div>
</div>
</div>
</div>
<div class="sectionTitle">免费领取</div>
<div class="row hightitem section03">
<div class="col brb" tapmode="highlight" onclick="fnOpenShopList(1,-1)">
<div class="matrix3">
<div class="matrixcell">
<div class="title">最热0元抢</div>
<div class="subtitle">还不来就晚了</div>
</div>
</div>
<img src="../image/find/logo_05.png">
</div>
<div class="col bb" tapmode="highlight" onclick="fnOpenShopList(1,-1)">
<div class="matrix3">
<div class="matrixcell">
<div class="title">天天霸王餐</div>
<div class="subtitle">白吃白喝白玩</div>
</div>
</div>
<img src="../image/find/logo_06.png" alt="">
</div>
</div>
<div class="sectionTitle">趣味生活</div>
<div id="list" class="card-list">
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/SHA1.js"></script>
<script type="text/javascript" src="../script/APICloud-rest.js"></script>
<script type="text/javascript">
apiready = function() {
init();
getFindList();
};
var list;
function init(){
list = $api.byId('list');
}
//从数据云中取数据
function getFindList(){
var appId = 'A6926489596723';
var appKey = '28541A49-6A01-D223-40BC-8AEA3340C183';
var client = new Resource(appId, appKey);
var Find= client.Factory("find");
Find.query({
"filter": {
"where": {},
"order":"eye DESC",//排序，从大到小
"skip": 0,
"limit": 3
}
},function(ret,err){
// alert(JSON.stringify(ret)+','+JSON.stringify(err));
if(ret){//拿到服务器上的数据
var html = '';//方法一
for(var i = 0;i<ret.length;i++){//采用的拼接法
html += '<div class="card hightitem"><div class="upimg"><img src="' + ret[i].image.url + '"><div class="info"><div class="title">' + ret[i].title + '</div><div class="subtitle">' + ret[i].subTitle + '</div><div class="img_wrap"><div class="viewed-eye"><i class="eye"></i>' + ret[i].eye + '</div></div></div></div></div><div class="h10"></div>';
}
list.innerHTML =html;
}
});
};
</script>
</html>
</span>
此次是使用比较老的方法来做，下一篇文章我会使用dot模板来做,那样的话就简单多了！发这些自己学习的文章，一来是为了自己以后更好的查看，二来,希望能帮到能用的上的朋友,也欢迎来与我技术交流，我的QQ是：542601041
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。