微信小程序里 wx:for和wx:for-item区别（补充下wx:key）

 wx:for

一维数组情况：

在页面上

view  wx:for  ="{{list}}"  

{{item.id}}

view

是循环list

item是List的别名

多维数组情况：

view  wx:for  ="{{parent_list}}"  

{{item.id}}

　　view  wx:for  ="{{item.childlist}}"  wx:for-item="items"

　　　　{{item.id}}

　　view

view

 

items是子List的别名。子Lsit是 item.childlist

 

总结： wx:for  是循环list   wx:for = "{{list}}"换成wx:for-items="{{list}}"    结果是一样 的     也就是 wx:for等价与wx:for-items是循环数组用的；

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：默认 index

 

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

对 wx:key 补充：

如果 列表中 项目位置 会动态改变  或者可能会有新的项目会加入列表中

需要标识这个项目在列表的位置：

则   可以选 用ltem的某个唯一的属性作为Key

或者 用 *this  关键字代表   for循环的item本身，这种表示需要item本身就是 一个唯一的字符串或者数字。

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

 举例子：一个应用：

获得了N条信息，但是不确定具体多少条。怎么在界面上显示呢

wxml代码

<view wx:for="{{items}}" wx:for-index="index" wx:for-item="item">
{{index+1}}、{{item.title}}
</view>

　　js代码

Page({

data: {
    items: [
        {
            "url":"http://127.0.0.1/1.flv",
            "title":"这是标题一"
        },
        {
            "url":"http://127.0.0.1/2.flv",
            "title":"这是标题二"
        }
    ]
}

})