代码例子是从一个项目中截取出来的，样式没给出，以及可能会有些冗余的代码
组件使用vant weapp https://youzan.github.io/vant-weapp/#/intro

前言

目前官方的文档里，主要是一维数组列表渲染的案例，还是比较简单单一，给刚入门的还是有点无从入手的感觉。

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

<!--wxml-->
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

现在，我们主要来讲讲动态多维数组和对象混合的列表渲染。 如图所示

二层嵌套循环列表渲染

直接上要循环显示的数组对象代码

//js中data代码
data: {
    items:[
      {
        orderNumber: '201907021302576428F355',
        orderTime: '2019-07-20 14:00',
        status: '待采购',
        shop:[
          {
            shopName: '食用调和油',
            shopNum: '4'
          },{
            shopName: '酱油',
            shopNum: '3'
          },
        ],
        num: '8',
        price: '789.00',
      }, {
        orderNumber: '201907021302576428F355',
        orderTime: '2019-07-20 14:00',
        status: '待采购',
        shop: [
          {
            shopName: '法式小面包',
            shopNum: '8'
          },{
            shopName: '酸牛奶',
            shopNum: '2'
          }, {
            shopName: '巧克力蛋糕',
            shopNum: '1'
          }, {
            shopName: '巧克力蛋糕',
            shopNum: '1'
          }, {
            shopName: '巧克力蛋糕',
            shopNum: '1'
          }
        ],
        num: '8',
        price: '789.00',
      }
    ],
  },

wxml代码

                  <!--一层循环-->
<block wx:for='{{items}}' wx:key='index'>
        <van-panel use-footer-slot custom-class='custom-class'>
          <view class='contain'>
                  <!--二层循环-->
            <block wx:for='{{item.shop}}' wx:for-item="shopItem">
              <view>
                <text class='shopName'>{{shopItem.shopName}}</text>
                <text class='shopNum'>x{{shopItem.shopNum}}</text>
              </view>
            </block>
          </view>
          <!-- 头部插槽 -->
          <view slot="header" class='header'>
            <view class='circle'></view>
            <view class='big-order'>
              <view class='order'>{{item.orderNumber}}</view>
              <view class='time'>下单时间：{{item.orderTime}}</view>
            </view>
            <van-icon name="arrow" color='gray' size='small'/>
            <view class='status'>{{item.status}}</view>
          </view>
          <!-- 底部插槽 -->
          <view slot="footer" class='footer'>
            <view class='footer_up'>
              <view class='shopNumber'>
                共<text>{{item.num}}</text>件商品
              </view>
              <view class='cash'>
                金额：<text>{{item.price}}</text>
              </view>
            </view>
            <view class='footer-down'>
              <van-button size="mini">订单跟踪</van-button>
            </view>
          </view>
        </van-panel>
   </block>

以上就是二层循环代码。

我们在wxml代码里，很明显的看到有两个wx:for的控制属性，在二层循环的JSON代码里，我们看每个单数组里还有一层数据shop，这里是需要再循环渲染到页面上的，在第一层数据里，直接再循环item.shop即可，请记得一定要带上花括号。
在第二层的循环里，建议把当前项的变量名改为其他，即在wxml代码里看到的wx:for-item=”shopItem”，因为默认的当前项的变量名为item，如果不改换其他的话，你是拿不到第一层循环的数据的，因为被第二层的变量名覆盖了。

三层循环

三层以上的多层的数组循环，在原理上同二层循环是一样的，能理解了二层数组循环，对于三层以及三层以上都能得心应用的。