小程序列表显示不同的布局（列表里包含循环列表）

在显示订单列表的时候，需要在列表里显示不同的布局（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文件

<view class='maincontainer'>

 

<scroll-view class='tops'>

<image class='topimg' src='../../../img/title.png'></image>

 

<image class='beijingpic' src='../../../img/beijing.png' wx:if='{{showOrHidden}}'></image>

<text class='tishi' wx:if='{{showOrHidden}}'>您还没有相关订单哦！</text>

<view class='wrap1'>

 

<view class="classname" wx:for="{{lists}}" mode="widthFix">

<!-- 每一个item的布局 ——自然风光和一个包机 -->

 

<view class='{{item.twoData[0].length > 1? "hide":"show"}}'>

<view wx:for="{{item.twoData[0]}}" wx:for-item="twodata" >

<view view catchtap="modelpop" id="{{twodata.orderId}}" data-name = "{{twodata.orderTypeStr}}">

<!-- item标题 -->

<text class="textLine">{{twodata.orderTypeStr}}</text>

<!-- 分割线 -->

<view class='fenge' />

 

<!-- 详细信息的布局 -->

<view class='xinxi'>

<image src="{{'图片域名'+twodata.orderPic}}" class='diqiu'></image>

<view class='rightbuju'>

 

<view class='{{twodata.orderType == "4"? "show":"hide"}}'>

<!-- <view class='twocity'> -->

<text class='gocity'>{{twodata.departcity}}</text>

<image class='jiantou' src='../../../img/jiantou.png'></image>

<text class='gocity'>{{twodata.arrivecity}}</text>

</view>

 

<!-- 显示旅游包小标题详细的布局 显示和隐藏-->

<view class='{{twodata.orderType == "4"? "hide":"show"}}'>

<text class="rightlxr">{{twodata.travelTitle}}</text>

</view>

 

<!-- 人数 -->

<view>

<!-- <text class="rightxinxi" decode='{{true}}'>出发信息</text> -->

<text class="rightxinxi" decode='{{true}}'>共{{twodata.passengerNum}}人</text>

</view>

</view>

</view>

</view>

<!-- 时间和布局 -->

<view class='timeandjine'>

<view>

<!-- <text class="rightxinxi" decode='{{true}}'>时间：</text> -->

<image class='times' src='../../../img/time.png'></image>

<text class="xinxi1" decode='{{true}}'>{{twodata.departDate}}</text>

</view>

 

<!-- 金额的布局 隐藏和显示 -->

<view class='{{twodata.orderType == "4"? "hide":"show"}}'>

<text class="rightxinxi" decode='{{true}}' decode="{{true}}">估计金额 &nbsp;&nbsp;</text>

<text class="rightxinxi" decode='{{true}}'>¥:</text>

<text class="xinxi1">{{twodata.orderPrice}}</text>

</view>

</view>

</view>

</view>

 

<!-- 每一个item的布局包含多个包机订单22222222222222222222222222222 -->

 

<view class='{{item.twoData[0].length > 1? "show":"hide"}}'>

<!-- item标题 -->

<text class="textLine">包机申请</text>

<view wx:for="{{item.twoData[0]}}" wx:for-item="twodata" >

<view view catchtap="modelpop" id="{{twodata.orderId}}" data-name = "包机申请">

<!-- 详细信息的布局 -->

<view class='xinxi'>

<image src="{{'图片域名'+twodata.orderPic}}" class='diqiu'></image>

<view class='rightbuju'>

<view class='show'>

<text class='gocity'>{{twodata.departcity}}</text>

<image class='jiantou' src='../../../img/jiantou.png'></image>

<text class='gocity'>{{twodata.arrivecity}}</text>

</view>

 

<!-- 人数 -->

<view>

<text class="rightxinxi" decode='{{true}}'>共{{twodata.passengerNum}}人</text>

</view>

</view>

 

</view>

<!-- 时间和布局 -->

<view class='timeandjine'>

<view>

<image class='times' src='../../../img/time.png'></image>

<text class="xinxi1" decode='{{true}}'>{{twodata.departDate}}</text>

</view>

<view>

<text class="xinxi1">查看航段</text>

</view>

</view>

</view>

<!-- 分割线 -->

<view class='fenge' />

</view>

</view>

</view>

</view>

</scroll-view>

</view>