小程式文件整理之 列表渲染

2021-08-07 09:25:49 字數 1993 閱讀 8419

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

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

wx:for="

}">}:

}view>

page(, ]

}})

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

使用 wx:for-index 可以設定陣列當前下標名:

wx:for="}"

wx:for-index="idx"

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

}view>

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

wx:for="}"

wx:for-item="i">

wx:for="}"

wx:for-item="j">

wx:if="

}">}*

}= }view>

view>

view>

類似 block wx:if,也可以將 wx:for 用在標籤上,以渲染乙個包含多節點的結構塊。例如:

wx:for="

}">

}: view>

}view>

block>

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

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

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

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

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

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

示例**:

 } switch>

"switch"> switch

"addtofront"> add to the front

} switch>

"addnumbertofront"> 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 的值為字串時,會將字串解析成字串陣列

wx:for="array">

}view>

等同於wx:for="

}">

}view>

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

wx:for="

}">

}view>

等同於wx:for="

}" >

}view>

小程式文件整理之 條件渲染

在框架中,我們用 wx if 來判斷是否需要渲染該 塊 wx if true view 也可以用 wx elif 和 wx else 來新增乙個 else 塊 wx if 1 view wx elif 2 view wx else 3 view 因為 wx if 是乙個控制屬性,需要將它新增到乙個標...

微信小程式 框架之列表渲染(難點wx key)

最近在自己瞎搞乙個小專案 未來茶店。進行過程中對列表渲染就有很多不熟悉的地方,看了官方文件,也自己去弄個小demo,更好了解學習。初學者,有些專業詞解釋不對,體諒。隨機排序 加乙個 wxss body body input hei red js page dianji function event ...

小程式 wx for 列表渲染

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