wx:for循环相关页面布局

效果图如下：

wxml部分代码如下：

<view class="content_order" wx:for="{{advanceOrder}}" wx:key="index">
	<block>
	   <view class="orderTitle">
	     <text class="businessNum">交易号:{{item.number}}</text>
	     <text class="businessMethod">{{item.paymethod}}</text>
	   </view>
	   <view class="orderContent">{{item.information}}</view>
	   <view class="orderFooter">
	     <view class="left">交易金额:￥{{item.paynumber}}</view>
	     <button class="right">查看详情</button>
	   </view>
	    <!-- 图片盒子相关布局-->
	   <view class="orderIcon">
	    <!-- 图片布局   对图片 wx:for-->
	     <image wx:for="{{item.iconOrder}}" wx:key="{{index}}" src="{{item.icon}}"></image>
	   </view>
	 </block>
</view>

<image wx:for="{{item.iconOrder}}" wx:key="{{index}}" src="{{item.icon}}"></image>对image标签进行循环，可循环出数组中所有的img图片
css部分代码如下：

.content_order{
  margin: 0 20rpx 20rpx;
  padding: 0 30rpx;
  background: #ffffff;
  border-radius: 6rpx;
  box-shadow: 0 0 34px 0 rgba(193,193,193,0.50);
}
.orderTitle{
  display: flex;
  height: 88rpx;
  font-size: 24rpx;
  letter-spacing: 0;
  line-height: 24rpx;
  border-bottom: 1rpx dashed #DCDCDC;
  align-items: center;
  justify-content: space-between;
}
.businessNum{
  color: #999999;
}
.businessMethod{
  font-family: PingFangTC-Semibold;
  color: #2EA7E0;
}
.orderContent{
  overflow: hidden;
  word-break: normal;
  word-wrap: break-word;
  padding: 28rpx 0;
  line-height: 48rpx;
  font-size: 30rpx;
  color: #000000;
  letter-spacing: 0;
  border-bottom: 1rpx dashed #DCDCDC;
}
.orderFooter{
  display: flex;
  height: 94rpx;
  align-items: center;
  justify-content: space-between;
}
.orderFooter .left{
  font-family: PingFangTC-Semibold;
  font-size: 26rpx;
  color: #000000;
  letter-spacing: 0;
  line-height: 24rpx;
}
.orderFooter .right{
  padding:0 16rpx;
  margin: 0;
  font-size: 24rpx;
  color: #ffffff;
  letter-spacing: 2rpx;
  line-height: 48rpx;
  background: #2EA7E0;
  border: none;
  border-radius: 24rpx;
}
.orderIcon{
  height: 0;
  padding: 0;
  line-height: 0;
  transform: translateY(-155rpx);
}
.orderIcon image{
  width: 108rpx;
  height: 108rpx;
  margin-right: 14rpx;
}

js部分代码如下：

data:{
	advanceOrder: [
      {
        number: "eeeeeeeee",
        paymethod: "11111",
        information: "信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容",
        paynumber: "0",
        iconOrder: [
          { icon: "../../images/mark_icon1.png" }
        ]
      },
      {
        number: "eeeeeeeee",
        paymethod: "11111",
        information: "信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容",
        paynumber: "0",
        iconOrder: [
          { icon: "../../images/mark_icon1.png"},
          { icon: "../../images/mark_icon2.png"},
          { icon: "../../images/mark_icon3.png"}
        ]
      }
    ]
}