Shulou(Shulou.com)06/03 Report--

这篇文章主要介绍微信开发之如何实现列表渲染多层嵌套循环，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完!

undefined

示例：

{{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}}

我们可以看到，这里直接用两个花括号来给 view 循环列表，注意强调一下，请记得一下要用 两个花括号数据起来，如果不包起来， view 也会循环出来，但并不是自己要循环的数据，而且是给了一个假象给你以为是有循环了，这里开发工具有点坑人的感觉，这个还需要多细心点，这里记住一点，只要是有数据的，就需要花括号。

另外默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item，同时我这里也顺道演示了如何使用数组变量名和下标。

二层循环

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代码里，我们看每个刑罚组里还有一级数据 twodata ，这里是需要再循环渲染到页面上的，在第一层数据里，直接再循环 item.twodata 即可，请记得一定要带上花括号。

在第二层的循环里，建议把当前项的变量名改为其他，即在wxml代码里看到的 wx:for-item="twodata" ，因为默认的当前项的变量名为 item ，如果不改换其他的话，你是拿不到第一层循环的数据的，因为被第二层的变量名覆盖了。

所以我们在wxml代码里，在第二层循环时，可以看到还可以循环第一层的值，即 ------- 。

三层以上的多层循环

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

需要注意的地方，那就是老生常谈的问题了，数据需要用花括号括起来，从第二层起，把默认的当前项的变量名改为其他，例如 wx:for-item="twodata" ，还有细心再细心。

wx:key唯一标识符

为什么会有 wx:key 的出现呢，官方给的解释是，如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容， switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

在开发过程中， wx:key 的作用对于项目作用是非常大的，如果从文字上无法理解的童鞋，可以到github clone demo到微信开发工具里，亲自体验下。

We see this GIF animation, where there is a switch open state, the switch state is in the title of lamb ribs, when adding data to this array, the switch state does not follow lamb ribs, and does not maintain its own state.

Let's look at another example, using the wx:key unique identifier.

This GIF animation is also the state of clicking on the switch. The only difference is that when adding data, it maintains its own state.

I believe that through these two small examples, the unique identifier of wx:key should also be understood. If you want to improve your technology, you have to do more trouble. In your own Mini programs, write a wx:for and wx:key experience.

One more thing to note, let's look at the following code first

wx:key="id", we see that the value in wx:key does not need braces, yes, here is a special place, do not need braces, and do not need parameter names, although a field name in the data is needed.

The above is all the contents of this article "How to realize multi-layered nested loop of list rendering in WeChat development". Thank you for reading! Hope to share the content to help everyone, more relevant knowledge, welcome to pay attention to the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.