微信小程序wx:for循環(huán)的實例詳解
列表渲染
wx:for
在組件上使用 wx:for 控制屬性綁定一個數(shù)組，即可使用數(shù)組中各項的數(shù)據(jù)重復(fù)渲染該組件。
默認(rèn)數(shù)組的當(dāng)前項的下標(biāo)變量名默認(rèn)為 index，數(shù)組當(dāng)前項的變量名默認(rèn)為 item。
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
使用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名，
使用 wx:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
wx:for 也可以嵌套，下邊是一個九九乘法表
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
<view wx:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</view>
</view>
</view>
block wx:for
類似 block wx:if，也可以將 wx:for 用在標(biāo)簽上，以渲染一個包含多節(jié)點的結(jié)構(gòu)塊。例如：
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
wx:key
如果列表中項目的位置會動態(tài)改變或者有新的項目添加到列表中，并且希望列表中的項目保持自己的特征和狀態(tài)（如 中的輸入內(nèi)容， 的選中狀態(tài)），需要使用 wx:key 來指定列表中項目的唯一的標(biāo)識符。
wx:key 的值以兩種形式提供
字符串，代表在 for 循環(huán)的 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字符串或數(shù)字，且不能動態(tài)改變。保留關(guān)鍵字 *this 代表在 for 循環(huán)中的 item 本身，這種表示需要 item 本身是一個唯一的字符串或者數(shù)字，如：當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時候，會校正帶有 key 的組件，框架會確保他們被重新排序，而不是重新創(chuàng)建，以確保使組件保持自身的狀態(tài)，并且提高列表渲染時的效率。
如不提供 wx:key，會報一個 warning， 如果明確知道該列表是靜態(tài)，或者不必關(guān)注其順序，可以選擇忽略。
示例代碼：
<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>
<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>
Page({
data: {
objectArray: [
{id: 5, unique: 'unique_5'},
{id: 4, unique: '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(Math.random() * length)
const temp = this.data.objectArray[x]
this.data.objectArray[x] = this.data.objectArray[y]
this.data.objectArray[y] = 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 ].concat(this.data.numberArray)
this.setData({
numberArray: this.data.numberArray
})
}
})
注意：
當(dāng) wx:for 的值為字符串時，會將字符串解析成字符串?dāng)?shù)組
<view wx:for="array">
{{item}}
</view>
等同于
<view wx:for="{{['a','r','r','a','y']}}">
{{item}}
</view>
注意： 花括號和引號之間如果有空格，將最終被解析成為字符串
<view wx:for="{{[1,2,3]}} ">
{{item}}
</view>
等同于
<view wx:for="{{[1,2,3] + ' '}}" >
{{item}}
</view>
總結(jié)
以上所述是小編給大家介紹的微信小程序wx:for循環(huán)，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
JavaScript數(shù)據(jù)類型相關(guān)知識詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)類型相關(guān)知識詳解,文中有非常詳細(xì)的代碼示例,對正在學(xué)習(xí)js數(shù)據(jù)類型的小伙伴們有很好的幫助,需要的朋友可以參考下2021-04-04
javascript 基礎(chǔ)篇1 什么是js 建立第一個js程序
javascript是很多東西的基礎(chǔ)，比如jsp，ajax等，如果不會這么，那么學(xué)起這些來就比較麻煩，所以要先學(xué)好這個，為將來的學(xué)習(xí)打好經(jīng)濟基礎(chǔ)2012-03-03
JavaScript 基礎(chǔ)函數(shù)_深入剖析變量和作用域
下面小編就為大家?guī)硪黄狫avaScript 基礎(chǔ)函數(shù)_深入剖析變量和作用域。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
javascript下自帶的三個彈出對話框效果，需要的朋友可以參考下。下面對各個函數(shù)的說明也有使用用途，2010-08-08
window.requestAnimationFrame是什么意思,怎么用
window.requestAnimationFrame 告訴瀏覽器您要執(zhí)行的動畫并且請求瀏覽器的在下一個動畫幀重繪窗口,方法在瀏覽器重繪之前作為一個回調(diào)函數(shù)被調(diào)用,就是告訴瀏覽器在刷新屏幕的時候，調(diào)用這個方法2013-01-01
JavaScript判斷IE版本號，很簡單,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了JS實現(xiàn)的一個隨機點名功能,邏輯簡單,用在班級或活動時是個不錯的選擇,需要的朋友可以參考下2014-08-08
JavaScript_object基礎(chǔ)入門(必看篇)
下面小編就為大家?guī)硪黄狫avaScript_object基礎(chǔ)入門(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
BOM是瀏覽器的窗口對象，提供了很多窗口處理的API。在webapp框架越來越多的情況下，需要我們在同一窗口處理不同頁面、不同的ajax數(shù)據(jù)，則需要我們熟悉BOM的內(nèi)容。2016-05-05
鍵盤控制事件應(yīng)用教程大全...2006-11-11