微信小程序列表渲染開發(fā)教程(共9頁)

1、精選優(yōu)質(zhì)文檔-傾情為你奉上微信小程序列表渲染具體開發(fā)方法：wx:for在組件上使用wx:for控制屬性綁定一個數(shù)組，即可使用數(shù)組中各項的數(shù)據(jù)重復(fù)渲染該組件。默認數(shù)組的當(dāng)前項的下標變量名默認為index，數(shù)組當(dāng)前項的變量名默認為item index: item.messagePage( data: array: message: foo, , message: bar )使用wx:for-item可以指定數(shù)組當(dāng)前元素的變量名，使用wx:for-index可以指定數(shù)組當(dāng)前下標的變量名： idx: itemName.messagewx:for也可以嵌套，下邊是一個九九乘法表 view wx:if=i

2、 i * j = i * j block wx:for類似block wx:if，也可以將wx:for用在標簽上，以渲染一個包含多節(jié)點的結(jié)構(gòu)塊。例如： index: item wx:key如果列表中項目的位置會動態(tài)改變或者有新的項目添加到列表中，并且希望列表中的項目保持自己的特征和狀態(tài)（如中的輸入內(nèi)容，的選中狀態(tài)），需要使用wx:key來指定列表中項目的唯一的標識符。wx:key的值以兩種形式提供. 字符串，代表在 for 循環(huán)的 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字符串或數(shù)字，且不能動態(tài)改變。. 保留關(guān)鍵字*this代表在 for

3、 循環(huán)中的 item 本身，這種表示需要 item 本身是一個唯一的字符串或者數(shù)字，如：當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時候，會校正帶有 key 的組件，框架會確保他們被重新排序，而不是重新創(chuàng)建，以確保使組件保持自身的狀態(tài)，并且提高列表渲染時的效率。如不提供wx:key，會報一個warning， 如果明確知道該列表是靜態(tài)，或者不必關(guān)注其順序，可以選擇忽略。示例代碼： item.id Switch Add to the front item Add to the front Page( data: objectArray: id: 5, unique: unique_5, id: 4, uniqu

4、e: unique_4, id: 3, unique: unique_3, id: 2, unique: unique_2, id: 1, unique: unique_1, id: 0, unique: unique_0, , numberArray: 1, 2, 3, 4 , switch: function(e) const length = this.data.objectArray.length for (let i = 0; i length; +i) const x = Math.floor(Math.random() * length) const y = Math.floor

5、(Math.random() * length) const temp = this.data.objectArrayx this.data.objectArrayx = this.data.objectArrayy this.data.objectArrayy = temp this.setData( objectArray: this.data.objectArray ) , addToFront: function(e) const length = this.data.objectArray.length this.data.objectArray = id: length, unique: unique_ + length.concat(this.data.objectArray) this.setData( objectArray: this.data.objectArray ) , addNumberToFront: function(e) this.data.numberArray = this.data.numberArray.length + 1 .c