微信小程序里 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":"这是标题二"
        }
    ]
}

})