wx for 小程式列表渲染的使用說明

wx:for 控制屬性繫結乙個陣列，即可使用陣列中各項的資料重複渲染該元件。

預設陣列的當前項的下標變數名預設為 index，陣列當前項的變數名預設為 item，即： } 、 }

. 標籤原型（以標籤block為例）：

wx:for                  【必須 array】陣列

wx:for-index         【可選 string】用新的變數名代替}，特別在多個wx:for套嵌時使用，用於區分不同的}

wx:for-item          【可選 string】用新的變數名代替}，特別在多個wx:for套嵌時使用，用於區分不同的}

wx:key                 【可選 string | *this】動態新增列表、編輯列表時，希望列表專案保持自身特徵及狀態時需要此屬性。

wx:for 示例：

1

<
view 
wx:for
="}"
>
2}: }
3view
>

1

page(, ]8}
9 })

標籤中的} 表示陣列的下標值，index從0起始。

標籤中}表示陣列專案下message鍵值.

結果示例：

0:foo

1:bar

wx:for-index  與 wx:for-item   使用說明：

以下是九九乘法表**：

1

<
view 
wx:for
="}"
wx:for-item
="i"
>
2<
view 
wx:for
="}"
wx:for-item
="j"
>
3<
view 
wx:if
="}"
>
4} * } = }
5view
>
6view
>
7view
>

在上例中，將最外層的迴圈的}重定義為 i ，將內層的}重定義為j，這樣解決了名稱相重問題。 

wx:key的使用說明（以下引用官網內容，後面加自身的解釋）：

如果列表中專案的位置會動態改變或者有新的專案新增到列表中，並且希望列表中的專案保持自己的特徵和狀態（如 中的輸入內容，的選中狀態），需要使用 wx:key 來指定列表中專案的唯一的識別符號。

wx:key 的值以兩種形式提供

1. 字串，代表在 for 迴圈的 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字串或數字，且不能動態改變。

2. 保留關鍵字 *this 代表在 for 迴圈中的 item 本身，這種表示需要 item 本身是乙個唯一的字串或者數字，如：

當資料改變觸發渲染層重新渲染的時候，會校正帶有 key 的元件，框架會確保他們被重新排序，而不是重新建立，以確保使元件保持自身的狀態，並且提高列表渲染時的效率。

1

<
switch 
wx:for
="}"
wx:key
="unique"
style
="display: block;"
> } 
switch
>
2<
button 
bindtap
="switch"
> switch 
button
>
3<
button 
bindtap
="addtofront"
> add to the front 
button
>45
<
switch 
wx:for
="}"
wx:key
="*this"
style
="display: block;"
> } 
switch
>
6<
button 
bindtap
="addnumbertofront"
> add to the front 
button
>

1

page(,
5       ,
6       ,
7       ,
8       ,
9       ,
10],
11     numberarray: [1, 2, 3, 4]
12},
13switch: function
(e) 
22this
.setdata()
25},
26   addtofront: function
(e) ].concat(this
.data.objectarray)
29this
.setdata()
32},
33   addnumbertofront: function
(e))38}
39 })

**是最好的解釋方式，以上程式執行時，你可以選中其中的一項switch，使其為開狀態，然後點選「switch」或「add to the front「按鈕時，已選中的switch依然保持選中狀態。如果**中沒加 wx:key 時，選中的狀態將不保留。

微信小程式 列表渲染wx for

在元件上使用wx for控制屬性繫結乙個陣列，即可使用陣列中各項的資料重複渲染該元件。預設陣列的當前項的下標變數名預設為index，陣列當前項的變數名預設為item view wx for view page 使用wx for item可以指定陣列當前元素的變數名，使用wx for index可以指...

5 微信小程式 列表渲染 wx for

在元件上使用wx for控制屬性繫結乙個陣列，即可使用陣列中各項的資料重複渲染該元件。預設陣列的當前項的下標變數名預設為index，陣列當前項的變數名預設為item for page 使用wx for item可以指定陣列當前元素的變數名，使用wx for index可以指定陣列當前下標的變數名 f...

小程式 wx for 列表渲染

wx for 在元件上使用 wx for 控制屬性繫結乙個陣列，即可使用陣列中各項的資料重複渲染該元件。預設陣列的當前項的下標變數名預設為 index，陣列當前項的變數名預設為 item wx for view page 使用 wx for item 可以指定陣列當前元素的變數名，使用 wx for...