Rumah > applet WeChat > Pembangunan program mini > 小程序开发基础篇之数据绑定下(8)

小程序开发基础篇之数据绑定下(8)

Y2J
Lepaskan: 2017-04-25 09:40:32
asal
1719 orang telah melayarinya

教程接微信小程序开发教程(基础篇)7-数据绑定上,当需要展示一组数据时,可以使用wx:for

//.wxml
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

//.js
age({
  data: {
    array: [{
      message: &#39;foo&#39;,
    }, {
      message: &#39;bar&#39;
    }]
  }
})
Salin selepas log masuk

其中index是当前数据索引的默认变量名,item是当前数据项的默认变量名。
也可以使用 wx:for-itemwx:for-index 来指定别名

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>
Salin selepas log masuk

也可以嵌套使用,如下面是一个九九乘法表

<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>
Salin selepas log masuk

类似block wx:if,也可以将wx:for用在标签上,以渲染一个包含多节点的结构块

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>
Salin selepas log masuk

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: &#39;我没有被选中&#39;},
      {id: 2, name: &#39;我没有被选中&#39;},
    ],
  },

  addToFront: function(e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length, name: &#39;我没有被选中&#39;}].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  },
})
Salin selepas log masuk

上面的代码创建了两个checkbox组件和一个按钮,当点击按钮会在最上方新增一个checkbox组件。
编译代码,会显示如下界面:

小程序开发基础篇之数据绑定下(8)

这里写图片描述

点击按钮,界面如下:

小程序开发基础篇之数据绑定下(8)

这里写图片描述

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: &#39;我没有被选中&#39;},
      {id: 2, name: &#39;我没有被选中&#39;},
    ],
  },

  addToFront: function(e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length + 1, name: &#39;我没有被选中&#39;}].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  checkboxChange: function(e){
    console.log(&#39;checkboxChange&#39;)
    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 = &#39;我被选中了&#39;
              ischecked = true
          }
       }
       if (!ischecked){
         checkBoxArray[i].name = &#39;我没有被选中&#39;
       }
    }
    this.setData({
      objectArray: this.data.objectArray
    })
  }
})
Salin selepas log masuk

当选中第一个checkbox时,界面如下

小程序开发基础篇之数据绑定下(8)

这里写图片描述

这时如果点击添加组件按钮会怎样呢,期望的效果应该如下

小程序开发基础篇之数据绑定下(8)

这里写图片描述

然而实际效果确是下图这样的

小程序开发基础篇之数据绑定下(8)

这里写图片描述

可以看到渲染引擎并没有将选中的效果和数据绑定起来,导致出现了预期之外的结果。如果想要达到预期效果,就要使用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>
Salin selepas log masuk

将.wxml文件修改为上述代码所示,就可以实现预期效果,重点就在 wx:key = "id" 这一句

如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如
中的输入内容, 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供
1 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property的值需要是列表中唯一的字符串或数字,且不能动态改变。
2 保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要item 本身是一个唯一的字符串或者数字,

上面引用自微信官方教程。除了用于保持视图组件的状态外,使用wx:key还有助于提高渲染效率

当数据改变触发渲染层重新渲染的时候,会校正带有 key的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

Atas ialah kandungan terperinci 小程序开发基础篇之数据绑定下(8). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan