媒介

入门教程之列表衬着多层嵌套轮回，现在官方的文档里，主假如一维数组列表衬着的案例，照样比较简单单一，给刚入门的童鞋照样无从入手的觉得。

<view wx:for="{{items}}">
  {{index}}: {{item.message}}
</view>

另有一个九九乘法表把数据直接写到wxml里的，并非动态二维数组的列表衬着。

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

那末本日，我们重要来讲讲动态多维数组和对象夹杂的列表衬着。

解说

作甚多维数组和对象夹杂，给个很简单的例子

 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里怎样轮回，我们先看一下要轮回衬着到页面上的效果图。

<view wx:for="{{oneList}}"  wx:key="id">
    {{index+1}}、{{item.name}}
</view>

我们能够看到，这里直接用两个花括号来给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代码

        <view class="pad10" wx:for="{{twoList}}" wx:key="id">
            <view>
                {{index+1}}、{{item.name}}
            </view>
            <view wx:for="{{item.twodata}}" wx:for-item="twodata" wx:key="id">
                ----{{twodata.name}}---{{item.name}}
            </view>
        </view>

以上截图和代码是二层嵌套内容。
我们在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 体会下。

另有一个须要注重的处所，我们先看看以下代码

<view class="pad10" wx:for="{{twoList}}" wx:key="id">
</view>

wx:key="id"，我们看到wx:key里的值并不须要花括号的，是的，这里是比较迥殊的处所，不须要花括号，同时也不须要参数名，需假如虽然数据里的一个字段名。

结束语

本日我们讲了列表衬着，官方给的文档照样比较简单单一，我们这里更深切的讲了数组的一层、二层以及多层轮回，另有wx:key唯一标识符的运用方法和注重事项。

置信在小顺序推出公测以后，许多小伙伴都已抓紧要求注册小顺序了。在开辟阶段中也遇到了许多的题目，比方wx.request数据要求不成功，在数组操纵时，不知道怎样往数组里push数据，input怎样监听用户输入的状况，css的background-image没法猎取当地资本等等，本博客会出一个专题，给遇到这些题目的小伙伴处理思绪。

demo github地点：
https://github.com/bluefox168…

交流平台

近来人人对微信小顺序开辟热忱大涨，结识了不少对微信小顺序手艺开辟的牛人，也有一些刚入行的新手，特此我建立了一个微信小顺序手艺交流圈子，愿望给大伙有一个贞洁的手艺交流圈子，手艺交流，提拔自我。我们也会不定期宣布一些微信小顺序的进修教程。
此群的目的为纯（干）纯（货）的手艺交流群，不死于广告当中，已开启了群主约请确认机制。
须要入群的小伙伴，请加我的个人微信amwhuang。（备注：小顺序入群）

文章首发地点：
列表衬着多层嵌套轮回及wx:key的运用–微信小顺序入门教程
http://lanchenglv.com/article…
如需转载，请标明转载出处，感谢。