微信小程式 wxml列表渲染

2022-03-26 03:51:20 字數 1504 閱讀 6841

列表渲染存在的意義

以電商為例,我們希望渲染5個商品,而又希望容易改變,我們就要在wxml中動態新增。

}:}

page(,,,

,]

}})

上面在乙個非顯示元件block中,我們渲染五個有內容的view

wx:for是迴圈陣列,wx:for-item即給列表賦別名

子迴圈

<

view

wx:for

="}"

>}

<

view

wx:for

="}"

wx:for-item

="items"

>}}

view

>

wx:key用來穩定渲染,作為渲染想的唯一標識(主要有三種)

1、字串

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

data: ,,,,]}

<

input

value

="id:}"

wx:for

="}"

wx:key

="unique"

/>

2、保留關鍵字 *this

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

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

data: 

<

input

value

="id:}"

wx:for

="}"

wx:key

="*this"

/>

<

input

value

="id:}"

wx:for

="}"

wx:key

="*this"

/>

},

一般是指定乙個唯一的字段(類似於id的定義);

3、萬用字元+名字 

wk:key元件識別

渲染情況

狀態情況

for效率

有各元件可識別

渲染時僅改變元件順序

保持元件之前原來狀態

效率高無

元件無法識別

渲染時重新建立各元件

重置元件的初始狀態

效率低1.需要wx:key的情況

列表中專案的位置會動態改變或者有新的專案新增到列表中

希望列表中的專案保持自己的特徵和狀態

(如 中的輸入內容,的選中狀態)

微信小程式 框架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的顯示與隱藏 ...

學習微信小程式WXML之條件渲染

這是乙個解決今天吃什麼這一大難題的一小段 今天吃什麼?view wx if 餃子view wx elif 公尺飯view wx else 麵食view page 當頁面傳入的condition變數的值為1時,今天就吃餃子,當值為2時,今天就吃公尺飯 當為其他值時,今天就吃麵食。js檔案裡就是cond...

微信小程式 條件渲染 列表渲染

wx if表示判斷單個元件 block wx if表示判斷塊,也即判斷多個元件 true view 如果condition為真,則顯示 true 否則不顯示 使用wx elif和wx else來新增乙個else if 和else塊 大於5 view 大於2 view else 小於等於2 view ...