小程序列表显示不同的布局（列表里包含循环列表）
在显示订单列表的时候，需要在列表里显示不同的布局（ietm），甚至是在列表里的item里面还有循环列表如图所示：
逻辑道是不难。逻辑是这样的：前端展示的类型主要是两类，（1）包机申请（2）旅游风光。其中包机又包含了只有一个包机订单和多个包机订单的情况。
整体的布局分两类：只有一个订单的布局和多个订单的布局
1，然前端根据后台返回的数据字段。根据数组（下面代码里有介绍）的长度来判断显示哪一个布局（主要是用三元表达式显示和隐藏布局）
2，循环显示。
上代码：里面的资源文件，图片，读者可以自己找几张代替下，这里就不上传了。
（1）wxss
/* pages/personalcenter/my_tourism/my_tourism.wxss */
.maincontainer {
width: 100%;
height: 100%;
background: #f2f2f2;
display: flex;
flex-direction: column;
}
.wrap1 {
display: flex;
flex-direction: column;
padding-top: 115rpx;
padding-left: 25rpx;
padding-bottom: 25rpx;
}
.beijingpic {
margin-top: 300rpx;
width: 70%;
height: 460rpx;
margin-left: 120rpx;
margin-right: 50rpx;
}
.topimg {
margin-bottom: 30rpx;
position: fixed;
margin-top: -1rpx;
width: 100%;
height: 104rpx;
}
.wrap {
display: flex;
flex-direction: row;
padding-top: 15rpx;
padding-left: 25rpx;
padding-bottom: 25rpx;
}
.tishi {
color: #999;
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: center;
}
.xinxi {
width: 100%;
display: flex;
flex-direction: row;
}
.diqiu {
margin-top: 35rpx;
margin-bottom: 10rpx;
margin-left: 3rpx;
width: 171rpx;
height: 136rpx;
}
.rightpic {
width: 300rpx;
height: 133rpx;
}
.classname {
flex-direction: column;
margin-top: 0rpx;
margin-left: 5rpx;
display: flex;
width: 90%;
padding: 20rpx;
border: 0px solid #ccc;
border-radius: 8rpx;
margin-bottom: 20rpx;
background-size: 100% 100%;
background: #fff;
}
.center-w {
padding: 20rpx 0;
overflow: hidden;
color: #fff;
}
.center-w .left {
float: left;
font-size: 32rpx;
}
.right {
float: right;
font-size: 24rpx;
position: absolute;
right: 10%;
top: 9%;
width: 162rpx;
height: 127rpx;
display: block;
}
.viertext {
padding: 17rpx 0 0 0;
display: block;
color: #fff;
}
.relrasetime {
display: flex;
color: #ffb940;
font-size: 24rpx;
}
.goandarrive {
display: flex;
flex-direction: row;
width: 100%;
height: 50rpx;
margin-top: 10rpx;
}
.container {
display: flex;
flex-direction: column;
background: #fff;
}
.textLine {
margin-left: 3rpx;
margin-top: 1rpx;
font-family: "黑体";
color: #333;
font-size: 30rpx;
}
.rightbuju {
height: 140rpx;
margin-top: 28rpx;
margin-left: 20rpx;
display: flex;
flex-direction: column;
}
.rightlxr {
color: #272020;
font-size: 30rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
}
.lxr1 {
color: #666;
margin-left: 40rpx;
font-size: 22rpx;
margin-top: 26rpx;
}
.rightsjh {
color: #999;
font-size: 22rpx;
margin-top: 10rpx;
}
.sjh1 {
color: #666;
margin-left: 40rpx;
font-size: 22rpx;
margin-top: 10rpx;
}
.xinxi1 {
color: #666;
margin-left: 10rpx;
font-size: 28rpx;
margin-top: 10rpx;
}
.rightxinxi {
color: #999;
font-size: 28rpx;
margin-top: 10rpx;
}
.textLine1 {
margin-left: 20rpx;
margin-top: 40rpx;
font-family: "黑体";
color: #888;
font-size: 28rpx;
}
.textLine2 {
margin-left: 3rpx;
margin-top: 10rpx;
font-family: "黑体";
color: #888;
font-size: 28rpx;
}
.relrasename {
margin-left: 20rpx;
margin-top: 10rpx;
margin-right: 20rpx;
font-family: "黑体";
color: #888;
font-size: 28rpx;
}
.imageorder {
margin-top: 18rpx;
padding-left: 30rpx;
padding-right: 30rpx;
width: 55rpx;
height: 10rpx;
align-items: center;
justify-content: center;
}
.fenge {
width: 100%;
height: 3rpx;
background: #e5e5e5;
margin: 21rpx 3rpx -10rpx 3rpx;
}
/* 时间的布局 */
.times {
width: 18rpx;
height: 18rpx;
}
.jiantou {
margin-top: -10rpx;
margin-left: 40rpx;
margin-right: 40rpx;
width: 58rpx;
height: 10rpx;
margin-bottom: 10rpx;
}
/*隐藏金额的布局 */
.hide {
display: none;
}
/*显示金额的布局 */
.show {
display: block;
}
/* 时间和金额的布局 */
.timeandjine {
font-size: 28rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
（2）js文件
var utils = require('../../../utils/util.js'); //公共文件存储一些数值，例如uid
var app = getApp();
var lists = []
Page({
/**
* 页面的初始数据
*/
data: {
lists: [],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
wx.request({
url: app.globalData.urls + app.globalData.getmyorder,
data: {
userId: utils.getuid() //给后台的参数
},
header: {
'content-type': 'application/json' // 默认值
},
success: (res) => { //注意，按照正常的逻辑，后台应该根据前端的需求返回数据结构，目的是防止界面卡顿。前端的任务只是显示数据，而不是负责处理更改数据结构，因为这样一来，如果逻辑复杂，会增加处理时间，客户体验会很差，甚至直接卡死。所以一个好的后台很重要。也就是说，下面的逻辑应该由后台处理，但是后台处理起来也是很复杂，我们研究了2天，为了赶工期最后决定，有前端处理。逻辑是这样的：
（1）把从后台得到的数据存到一个数组里arr 。
（2）然后在循环遍历这个数组，去重，把剩下的数组放到另外一个新数组里newArr 。
（3）循环arr，里层循环newArr，对比相同元素（createTime）我的是这个，如果有相同就把相同的放在一个数组里，作为item里面循环的数组。
看代码。
console.log(res) //输出日志
var arr = res.data.data //先把得到的数组存起来
if (res.data.error == 0) {
if (res.data.data.length == 0) {
this.setData({ //获取数据成功后的数据绑定
showOrHidden: true, //如果有数据，就把占位图隐藏
});
} else {
var lastarr = []; //最后处理之后得到的的数组
var newArr = []; //新建一个临时的数组（去重之后的数组）
for (var i = 0, len = arr.length; i < len; i++) {
if (newArr.indexOf(arr[i].createTime) == -1) { //若新数组中未包含该项则将其存入新数组
newArr.push(arr[i].createTime); //把重复的数组放到一起
}
}
for (var i = 0, len = newArr.length; i < len; i++) {
var temp = {};
temp.twoData = [];//临时存放小数组的数组
var shuzu = []
for (var j = 0; j < arr.length; j++) {
if (newArr[i] == arr[j].createTime) {
shuzu.push(arr[j]);
}
}
temp.twoData.push(shuzu);
lastarr.push(temp); //把得到的数组放到最后的数组里
}
// console.log(lastarr);
for (var i = 0; i < lastarr.length; i++) {
lists[i] = lastarr[i]
}
this.setData({ //获取数据成功后的数据绑定
lists: lists,
showOrHidden: false,
});
}
}
}
})
},
modelpop: function(options) { //点击item获取每一个项目的详情
var id = options.currentTarget.id //获取id根据因为点击进入详情的时候，需要id
var name = options.currentTarget.dataset.name //这个是进入下一页是显示的标题，注意：获取这个的方法和上边的不一样。
if (name == "包机申请") { //根据名称判断具体转跳到哪一个界面
wx.navigateTo({
url: '../bjorder/bjorder?id=' + id+"&name=包机申请" //包机申请 进入你的界面
})
} else {
wx.navigateTo({ //旅游包
url: '../lyorder/lyorder?id=' + id + "&name="+name
})
}
},
})
3，xml文件