微信小程序里 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":"這是標題二"
        }
    ]
}

})