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

2022-05-02 23:21:13 字數 1843 閱讀 6863

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

預設陣列的當前項的下標變數名預設為index,陣列當前項的變數名預設為item

for="}">}: }

page(, ]

}})

使用wx:for-item可以指定陣列當前元素的變數名,

使用wx:for-index可以指定陣列當前下標的變數名:

for="}" wx:for-index="idx" wx:for-item="itemname">}: }

wx:for也可以巢狀,下邊是乙個九九乘法表

for="}" wx:for-item="i">

for="}" wx:for-item="j">

if="}">} * } = }

for="}">

}: }

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

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

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

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

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

如不提供wx:key,會報乙個warning, 如果明確知道該列表是靜態,或者不必關注其順序,可以選擇忽略。

示例**:

 } 

switch

add to the front

} add to the front

page(,,,

,,,],

numberarray: [1, 2, 3, 4]

},switch: function

(e)

this

.setdata()

},addtofront:

function

(e) ].concat(this

.data.objectarray)

this

.setdata()

},addnumbertofront:

function

(e))

}})

注意:

wx:for的值為字串時,會將字串解析成字串陣列

for="array">}

for="}">}

注意:花括號和引號之間如果有空格,將最終被解析成為字串

for="} ">}

for="}" >}

微信小程式 列表渲染wx for

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

微信小程式wx for迴圈列表渲染

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

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

wx for 控制屬性繫結乙個陣列,即可使用陣列中各項的資料重複渲染該元件。預設陣列的當前項的下標變數名預設為 index,陣列當前項的變數名預設為 item,即 標籤原型 以標籤block為例 wx for 必須 array 陣列 wx for index 可選 string 用新的變數名代替 特...