这是数据结构
{
"code": 0,
"msg": "成功",
"data": {
"pageNum": 1,
"pageSize": 10,
"size": 10,
"orderBy": null,
"startRow": 1,
"endRow": 10,
"total": 66,
"pages": 7,
"list": [
{
"id": "93307d9f-325a-4314-a87d-701047ce2b9f",
"payType": 3,
"payTradeNo": null,
"payStatus": 1,
"expId": null,
"expNo": null,
"expFee": null,
"expStatus": null,
"expTime": null,
"addrConsignee": "name",
"addrZipcode": "551600",
"addrArea": "贵州 贵阳市 云岩区",
"addrDetail": "贵州省贵阳市云岩区红星城市广场",
"addrMobile": "15700104801",
"status": 1,
"payAmount": 456,
"orderAmount": 456,
"couponAmount": 0,
"pointAmount": 0,
"addTime": 1515028603000,
"msg": null,
"orderGoodsList": [
{
"goodsDetailId": "2",
"title": "白米醋 陈醋香醋饺",
"imgUrl": "http://zh-imageserver.oss-cn-shenzhen.aliyuncs.com/201709211835322058.png",
"price": 456,
"amount": 456,
"count": 1,
"specDesc": "总酸(以乙酸计), g/100ml ≥ 3.50",
"couponAmount": 12,
"rewardPoint": 12,
"activeType": 0,
"activeNo": null
}
]
}
}
}
这是html
<div class="order-list" id="content"></div>
获取数据
//列表
var loadMore = function (callback) {
$.ajax({
url:'',
type: 'get',
contentType: 'application/json',
success: function (response) {
var data = response.data;
var list = data.list;
typeof callback == 'function' && callback(list);
}
});
};
// 调用模板加载数据
loadMore(function (listArr) {
var html = template('ordertest', {
list: listArr
});
$('.order-list').append(html);
});
})
模板语法
<!-- //模板引擎 -->
<script type="text/html" id="ordertest">
{{each list as value }}
<div class="order-list-item">
<h1>
<span class="orderTime">{{value.addTime | dateFormat:'yyyy-MM-dd h:m:s'}}</span>
{{if value.status==1}}
<strong float-right>未支付</strong>
{{/if}} {{if value.status==2}}
<strong float-right>待发货</strong>
{{/if}}
</h1>
<div class="list">
{{include 'orderlist' value}}
</div>
<div class="order-id">
<p>
订单号:{{value.id}}
</p>
<p>
订单合计:¥
<span>{{value.payAmount}}</span>
</p>
</div>
</div>
{{/each}}
</script>
<!-- 子模板引擎 -->
<script type="text/html" id="orderlist">
{{each orderGoodsList as value}}
<article class="m-list list-theme4">
<a href="order-detail.html" class="list-item">
<div class="list-img">
<img src="{{value.imgUrl}}" alt="" />
</div>
<div class="list-mes">
<h3 class="list-title">{{value.title}}</h3>
<div class="list-mes-item">
<div>
<span class="list-price">
<em>¥</em>{{value.price}}</span>
</div>
<div>x{{value.count}}</div>
</div>
</div>
</a>
</article>
{{/each}}
</script>
基本就是这样,这是一个例子 ,没有给大家讲解,但是看看会懂的