微信小程序笔记-列表循环的基本要点

新手笔记，大佬如果发现有误，本人积极改正，谢谢大家了QAQ

长话短说，直入正题，小程序的列表循环和可以分成四个主要的组件

    但我们要先明白一个道理：先寻找到你想要循环的目标，才能循环，找不到，程序怎么循环？

        1、 wx:for="{{数组或者对象}}"            \\告诉程序你要对那一个数组循环

        2、wx:for-item="循环项的名称"         \\告诉程序你要数组中具体的哪一个循环

        3、wx:for-index="循环项的索引"          \\循环时需要的编号

                    wx:key ="唯一的值" 用来提高列表渲染的性能

        4、 wx:key="id"    \\程序的动态变化的必要参数，静态时可不加，下一期我们举个例子

没看懂没关系

        我举个例子：

        我们把朝阳小区作为一个数组，每个住户储存在了数组里的一个个空间

        朝阳小区community：[

                {

                        门牌号num：0

                        住户姓名name：张三

                },

                {

                        门牌号：1

                        住户姓名：李四

                },

                {              

                        门牌号：2

                        住户姓名：王二麻子

                }

        ]

         我想找住在朝阳小区的门牌号为2的王二麻子

        那么：

                   朝阳小区是一个特殊名词，作为的是一个数组，

                               朝阳小区 是特有的，不可能一个地方两个朝阳小区吧！

                   于是 wx:for="{{朝阳小区}}" 

                    因为我要找的是王二麻子，他是一个具体的人\值 

                    因此 wx:for-item="王二麻子"

                     那么我该怎么找到王二麻子呢？每个小区的门牌号码是固定的，也就是说我们可以根据门牌号去找的相应的那个人

                     所以 wx:for-index="门牌号为2333"  

那么我将朝阳小区进行一次列表循环

<view>

  <view wx:for="{{community}}" wx:for-item="name" wx:for-index="num" wx:key="id">

            门牌号：{{num}}

    <!-- 值内 为 数组包含的属性 eg：id name -->

            住户名:  {{name.name}}

  </view>

那么结果如下：

        门牌号：0     住户名：张三

        门牌号：1     住户名：李四

        门牌号：2     住户名：王二麻子

//BUG说明，因为是列表循环，所以索引按0开始计算，没办法显示你设定的值

程序会将整个朝阳小区进行遍历循环

现在理解了吗？就和找人没什么区别，记住先需要找到目标，才能循环！

列表循环在日常使用中的一些注意事项：

        1、wx:key="id" 绑定一个普通的字符串的时候，必须是该循环数组中的唯一属性，eg-> ID

 使用场景 有规律         像学生的学生号，公司的员工号等

        2、wx:key="*this" 表示 你的数组是一个普通数组 ,*this 表示为循环项

              eg:  [1,5,233,611] 、["agjn","ehihn","xjvbb"]

        3、当数组出现嵌套查询时， wx:for-item="item"    

                                                       wx:for-index="index"   这两个绑定的名字不能一样                

        4、但是只有一层循环时，可以不写wx:for-item="item" ，wx:for-index="index" 这两个