效果图
结合效果图说明需求：除了最新的信息图标为橘黄色外， 其余的都是灰色图片，然后根据返回的完整时间进行截取出日期和时分，后面就是详情信息
只粘贴了子页面内容，是我写的，其余的是别人写的，我不能拿出来的。
<!--子页面内容-->
<!--头部-->
<div style="margin-top: 20px;margin-left: 20px;">
<label style="font-size: 15px;color: gray;">您的货物正在运输途中</label>
</div>
<!--list 内容-->
<div class="mui-content">
<ul class="mui-table-view" id="listcontent">
</ul>
</div>
<!--JS代码区域-->
<script type="text/javascript" src="js/mui.min.js" ></script>
<script>
//屏幕控制：设置为竖屏
mui.plusReady(function() {
plus.screen.lockOrientation("portrait-primary");
});
//创建蒙版
var isshow = false;
var mask=mui.createMask(function(){
return isshow;
});
mask.show();
//
// //post请求
// mui.post('http://192.168.0.132:8080/etran/mobile/order/getOrderCarsLocation',{
// //订单id
// orderId:,
// //订单车型
// orderModel:
// },function(data){
// isshow=true;
// mask.close();
// console.log(JSON.stringify(data));
//
// if(data.returnCode ==-1){
// mui.toast(data.msg);
// }else{
// if(data.returnCode==1){
//
// console.log("data="+data);
//
// document.getElementById('listcontent').appendChild(createFragment(data.result.length,data.result));
// }
// }
//
// },'json'
//);
// //实例数据
var result = [{"address":"重庆市","conment":"2016-07-01 09:30","date":""},
{"address":"成都市","conment":"2016-07-01 12:15"},
{"address":"广州市","conment":"2016-07-01 14:25"},
{"address":"上海市","conment":"2016-07-02 08:15"},
{"address":"天津市","conment":"2016-07-02 09:15"},
{"address":"哈哈市","conment":"2016-07-02 12:15"},
{"address":"未知","conment":"2016-07-03 08:15"},
{"address":"未知","conment":"2016-07-03 09:15"}];
document.getElementById('listcontent').appendChild(createFragment(result.length,result));
/*
* 在listcontent下添加子标签
*
*/
function createFragment(count,result){
isshow=true;
mask.close();
console.log('count ='+count+'result ='+parseInt(result[0].conment.substring(10,13)));
//创建文档的碎片节点
var fragment = document.createDocumentFragment();
for (var i=0;i<count;i++) {
//内容中添加div
content = document.createElement("div");
//i大于0并且时间小于24小时
if (i > 0 && parseInt(result[i].conment.substring(10,13))<24) {
console.log('date -- '+parseInt(result[i].conment.substring(10,13)));
//通过时间进行判断是否显示日期
if (parseInt(result[i].conment.substring(10,13)) < parseInt(result[i-1].conment.substring(10,13))) {
content.innerHTML='<li style="padding: 5px;">'+
'<img class="content_image" src="images/circle_gray.png" style="width: 10px;height: 10px;"/>'+
'<label style="margin-left: 10px; ">'+result[i].conment.substring(0,10)+'</label>'+
'<label style="margin-left: 20px; color: darkgray;">'+result[i].conment.substring(10,16)+'</label>'+
'<label style="margin-left: 10px; color: darkgray;">车辆到达【'+result[i].address+'】</label>'+
'</li>';
//最后一条显示orange
} else if(i==count-1){
content.innerHTML='<li style="padding: 5px;">'+
'<img class="content_image" src="images/circle_orange.png" style="width: 10px;height: 10px;"/>'+
'<label style="margin-left: 93px; "></label>'+
'<label style="margin-left: 10px; color: darkgray;">'+result[i].conment.substring(10,16)+'</label>'+
'<label style="margin-left: 10px; color: darkgray;">车辆到达【'+result[i].address+'】</label>'+
'</li>';
}
else{
content.innerHTML='<li style="padding: 5px;">'+
'<img class="content_image" src="images/circle_gray.png" style="width: 10px;height: 10px;"/>'+
'<label style="margin-left: 93px; "></label>'+
'<label style="margin-left: 10px; color: darkgray;">'+result[i].conment.substring(10,16)+'</label>'+
'<label style="margin-left: 10px; color: darkgray;">车辆到达【'+result[i].address+'】</label>'+
'</li>';
}
}else{
//当i=0的时候
if(i==0){
content.innerHTML='<li style="padding: 5px;">'+
'<img class="content_image" src="images/circle_gray.png" style="width: 10px;height: 10px;"/>'+
'<label style="margin-left: 10px; ">'+result[i].conment.substring(0,10)+'</label>'+
'<label style="margin-left: 20px; color: darkgray;">'+result[i].conment.substring(10,16)+'</label>'+
'<label style="margin-left: 10px; color: darkgray;">车辆从【'+result[i].address+'】发出</label>'+
'</li>';
}
}
fragment.appendChild(content);
}
return fragment;
}
</script>
</body>
