教程接上篇,当须要展现一组数据时,能够运用wx:for
//.wxml
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
//.js
age({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
个中index
是当前数据索引的默许变量名,item
是当前数据项的默许变量名。
也能够运用 wx:for-item
和 wx:for-index
来指定别号
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
也能够嵌套运用,以下面是一个九九乘法表
<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:if
,也能够将wx:for
用在<block/>标签上,以衬着一个包括多节点的构造块
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
wx:key
要明白为何须要wx:key
,先来看一个例子:
//.wxml
<checkbox wx:for="{{objectArray}}" value="{{item.name}}" style="display: block;"> {{item.name}} </checkbox>
<button bindtap="addToFront">在上方增加一个新的check组件</button>
//.js
Page({
data: {
objectArray: [
{id: 1, name: '我没有被选中'},
{id: 2, name: '我没有被选中'},
],
},
addToFront: function(e) {
const length = this.data.objectArray.length
this.data.objectArray = [{id: length, name: '我没有被选中'}].concat(this.data.objectArray)
this.setData({
objectArray: this.data.objectArray
})
},
})
上面的代码建立了两个checkbox组件和一个按钮,当点击按钮会在最上方新增一个checkbox
组件。
编译代码,会显现以下界面:
点击按钮,界面以下:
ok,到这里一切正常 ,为了更好的申明题目,到场checkbox选中事宜的处置惩罚,当checkbox被选中时,将笔墨修改成”我被选中了”,相干代码以下:
//wxml
<checkbox-group bindchange="checkboxChange">
<checkbox wx:for="{{objectArray}}" value="{{item.id}}" style="display: block;" > {{item.name}}
</checkbox>
</checkbox-group>
<button bindtap="addToFront">在上方增加一个新的check组件</button>
//js
Page({
data: {
objectArray: [
{id: 1, name: '我没有被选中'},
{id: 2, name: '我没有被选中'},
],
},
addToFront: function(e) {
const length = this.data.objectArray.length
this.data.objectArray = [{id: length + 1, name: '我没有被选中'}].concat(this.data.objectArray)
this.setData({
objectArray: this.data.objectArray
})
},
checkboxChange: function(e){
console.log('checkboxChange')
const length = this.data.objectArray.length
let checkBoxArray = this.data.objectArray
for (let i = 0; i < length; i++) {
let ischecked = false
for (let j = 0; j < e.detail.value.length; j++){
if (checkBoxArray[i].id == e.detail.value[j]){
checkBoxArray[i].name = '我被选中了'
ischecked = true
}
}
if (!ischecked){
checkBoxArray[i].name = '我没有被选中'
}
}
this.setData({
objectArray: this.data.objectArray
})
}
})
当选中第一个checkbox时,界面以下
这时刻假如点击增加组件按钮会如何呢,希冀的效果应当以下
但是实际效果确是下图如许的
能够看到衬着引擎并没有将选中的效果和数据绑定起来,致使涌现了预期以外的效果。假如想要到达预期效果,就要运用wx:key
<checkbox-group bindchange="checkboxChange">
<checkbox wx:for="{{objectArray}}" wx:key = "id" value="{{item.id}}" style="display: block;" > {{item.name}}
</checkbox>
</checkbox-group>
<button bindtap="addToFront">在上方增加一个新的check组件</button>
将.wxml文件修改成上述代码所示,就能够完成预期效果,重点就在 wx:key = "id"
这一句
假如列表中项目的位置会动态转变或许有新的项目增加到列表中,而且愿望列表中的项目坚持本身的特性和状况(如 <input/>
中的输入内容,<switch/> 的选中状况),须要运用wx:key
来指定列表中项目的唯一的标识符。
wx:key
的值以两种情势供应
1 字符串,代表在 for 轮回的 array 中 item 的某个 property,该 property的值须如果列表中唯一的字符串或数字,且不能动态转变。
2 保存关键字*this
代表在 for 轮回中的 item 本身,这类示意须要item 本身是一个唯一的字符串或许数字,
上面援用自微信官方教程。除了用于坚持视图组件的状况外,运用wx:key
另有助于进步衬着效力
当数据转变触发衬着层从新衬着的时刻,会校订带有 key的组件,框架会确保他们被从新排序,而不是从新建立,以确保使组件坚持本身的状况,而且进步列表衬着时的效力。