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