微信小程序入门教程--列表渲染多层嵌套循环及wx:key的使用

前言

入门教程之列表渲染多层嵌套循环，目前官方的文档里，主要是一维数组列表渲染的案例，仍是比较简单单一，给刚入门的童鞋仍是无从入手的感受。

 
  
  {{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代码里，在第二层循环时，能够看到还能够循环第一层的值，即----{{twodata.name}}---{{item.name}}。

三层以上的多层循环

三层以上的多层的数组循环，在原理上同二层循环是同样的，能理解了二层数组循环，对于三层以及三层以上都能得心应用的。
须要注意的地方，那就是老生常谈的问题了，数据须要用花括号括起来，从第二层起，把默认的当前项的变量名改成其余，例如wx:for-item="twodata"，还有细心再细心。

wx:key惟一标识符

为何会有wx:key的出现呢，官方给的解释是，若是列表中项目的位置会动态改变或者有新的项目添加到列表中，而且但愿列表中的项目保持本身的特征和状态（如 input 中的输入内容，switch 的选中状态），须要使用 wx:key 来指定列表中项目的惟一的标识符。
当数据改变触发渲染层从新渲染的时候，会校订带有 key 的组件，框架会确保他们被从新排序，而不是从新建立，以确保使组件保持自身的状态，而且提升列表渲染时的效率。
在开发过程当中，wx:key的做用对于项目做用是很是大的，若是从文字上没法理解的童鞋，能够到github clone demo到微信开发工具里，亲自体验下。

''

咱们看到这个GIF动画图，这里有一个switch的开启状态，switch的状态是在标题为羔羊排骨一条的，在对这个数组增长数据时，这个switch的状态并不跟随着羔羊排骨一条，并不保持本身的状态。

那咱们再看另外一个例子，使用了wx:key惟一标识符。

''

这个GIF动画图，也是点击开启了switch的状态，惟一有不一样的地方，就是在新增数据时，是保持着本身的状态的。
相信经过这两个小例子，对wx:key惟一标识符应该也有所了解啦，想要提高技术，就要多折腾，本身在小程序里，写个wx:for 和 wx:key 体会下。

还有一个须要注意的地方，咱们先看看如下代码

  

 复制代码

wx:key="id"，咱们看到wx:key里的值并不须要花括号的，是的，这里是比较特别的地方，不须要花括号，同时也不须要参数名，须要是虽然数据里的一个字段名。

结束语

今天咱们讲了列表渲染，官方给的文档仍是比较简单单一，咱们这里更深刻的讲了数组的一层、二层以及多层循环，还有wx:key惟一标识符的使用方法和注意事项。

相信在小程序推出公测以后，不少小伙伴都已经抓紧申请注册小程序了。在开发阶段中也碰到了不少的问题，例如wx.request数据请求不成功，在数组操做时，不知道如何往数组里push数据，input如何监听用户输入的状态，css的background-image没法获取本地资源等等，本博客会出一个专题，给碰到这些问题的小伙伴解决思路。

demo github地址：
github.com/bluefox1688…

交流平台

''

最近你们对微信小程序开发热情大涨，结识了很多对微信小程序技术开发的牛人，也有一些刚入行的新手，特此我创建了一个微信小程序技术交流圈子，但愿给大伙有一个纯洁的技术交流圈子，技术交流，提高自我。咱们也会不按期发布一些微信小程序的学习教程。
此群的目标为纯（干）纯（货）的技术交流群，不死于广告之中，已开启了群主邀请确认机制。
须要入群的小伙伴，请加个人我的微信amwhuang。（备注：小程序入群）

文章首发地址：
列表渲染多层嵌套循环及wx:key的使用--微信小程序入门教程
lanchenglv.com/article/201…如需转载，请标明转载出处，谢谢。