WXML 列表渲染

2021-08-20 12:01:35 字數 1763 閱讀 6973

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

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

}: }

page(, ]

}})

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

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

}: }

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

} * } = }

類似block wx:if,也可以將wx: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的值為字串時,會將字串解析成字串陣列

}

等同於

}

注意:

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

}

等同於

}

二十 wxml語法 列表渲染

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

微信小程式 wxml列表渲染

列表渲染存在的意義 以電商為例,我們希望渲染5個商品,而又希望容易改變,我們就要在wxml中動態新增。page 上面在乙個非顯示元件block中,我們渲染五個有內容的view wx for是迴圈陣列,wx for item即給列表賦別名 子迴圈 view wx for view wx for wx ...

微信小程式 框架wxml(三)wxml條件渲染

記錄一下wxml的條件渲染,1.使用wx if wxml的 true 5 length 5 2 length 2 其他 在js的data為condition賦值為true,length賦值為6 效果圖 2.block wx if,用block對一組view進行組裝,可以控制一組view的顯示與隱藏 ...