前言

简介教程是关于列表渲染多层嵌套循环的列表。在当前的官方文档中，它主要包含一维阵列列表渲染的案例，该列表相对简单且单身，这使新生儿童鞋仍然感觉他们仍然不知道如何开始。

{{index}}: {{item.message}}

还有一个九九个乘法表，将数据直接写入WXML，而不是动态二维阵列的列表。

{{i}} * {{j}} = {{i * j}}

因此，今天，让我们主要谈论动态多维阵列和对象的列表渲染。

''

解释

多维阵列和对象的混合物是什么？举一个非常简单的例子

twoList:[{ id:1, name:'应季鲜果', count:1, twodata:[{ 'id':11, 'name':'鸡脆骨' },{ 'id':12, 'name':'鸡爪' }] },{ id:2, name:'精致糕点', count:6, twodata:[{ 'id':13, 'name':'羔羊排骨一条' },{ 'id':14, 'name':'微辣' }] }]

上面的示例是一个数组，这是我们在日常开发过程中经常遇到的JSON格式。

该数组的元素具有对象，并且对象被分为属于数组对象混合的属性。对于那些遇到这种数组对象混合时，这是小节目新手的孩子来说，这可能是一个问题。

一层循环

oneList:[{ id:1, name:'应季鲜果', count:1 },{ id:2, name:'精致糕点', count:6 },{ id:3, name:'全球美食烘培原料', count:12 },{ id:4, name:'无辣不欢生猛海鲜', count:5 }]

上面的数组对象混合JSON仅测试一层循环。让我们看看如何在WXML中循环。让我们首先看一下渲染到页面的渲染。

''

{{index+1}}、{{item.name}}

我们可以看到，我们使用两个卷曲括号来循环视图列表。请注意，我们需要使用两个卷发括号将数据放在一起。如果我们不包装它，那么视图也会循环，但这不是您要循环的数据，但它也会给您一种幻想，您认为有一个循环。这里的开发工具有点棘手。这需要更加谨慎。请记住，只要有数据，就需要卷曲括号。

此外，默认数组的下标变量名称是当前项目的默认值，而数组的当前项目的变量名称是项目。同时，我还演示了如何使用数组变量名称和下标。

第二层循环

''

JSON代码

twoList:[{ id:1, name:'应季鲜果', count:1, twodata:[{ 'id':11, 'name':'鸡脆骨' },{ 'id':12, 'name':'鸡爪' }] },{ id:2, name:'精致糕点', count:6, twodata:[{ 'id':13, 'name':'羔羊排骨一条' },{ 'id':14, 'name':'微辣' }] },{ id:3,

name:'全球美食烘培原料', count:12, twodata:[{ 'id':15, 'name':'秋刀鱼' },{ 'id':16, 'name':'锡箔纸金针菇' }] }]

WXML代码

{{index+1}}、{{item.name}} ----{{twodata.name}}---{{item.name}}

上面的屏幕截图和代码是两层嵌套内容。

在WXML代码中，我们显然看到WX的两个控制属性：for。在第二层循环的JSON代码中，我们看到每个单个数组中都有一个第一级数据。在这里，我们需要回收并将其渲染到页面。在第一层数据中，直接回收项目。请记住在上面放卷曲牙套。

在第二层循环中，建议将当前项目的可变名称更改为其他项目，即WX：for-item =“” WXML代码中看到的，因为当前项目的默认变量名称是项目。如果您不更改另一个，则不会获取第一层循环的数据，因为它被第二层的变量名称覆盖。

因此，在WXML代码中，当在第二层中循环时，我们可以看到第一层的值也可以循环，也就是说---- {{。name}}} - {{item.name}}。

三层以上的多层循环

在三层上方，多层阵列环在原理上与第二层环相同。您可以理解第二层阵列环，并且可以小心地应用于第三层及以上层。