微信小程序--列表循环

767 阅读14分钟

1.wx:for="{{数组或对象}}"   wx:for-item="循环项的名称"    wx:for-index="循环项的索引"

2.wx:key="唯一的值"    一般是id   用来提高列表渲染的性能

如果不给key值会有提示

key值绑定一个普通的字符串的时候,那么这个字符串名称肯定是循环数组中的对象的唯一属性

wx:key=“*this”  表示你的数组是一个普通的数组,*this表示item本身

[1,3,4,55,6]

["1","33","99"]

3.当循环嵌套的时候,注意不要重名

4.默认情况下,我们不写wx:for-item="item" wx:for-index="index“  小程序自己也会对应起来,所以只有一层循环的话可以省略

5.对象循环

wx:for="{{对象}}"     wx:for-item="对象的值" wx:for-index="对象的属性"

wx:for-item="value"   wx:for-index="key"

6.block属性

不使用block属性,在每一个循环项都会加上类名,并且是div形式展示

<view >  <view   wx:for="{{list}}"  wx:for-item="item"  wx:for-index="index"  class="111"  >    {{item.id}}    {{item.name}}  </view>

使用block属性,在每一个循环项都不会加上类名,并且是span形式展示

  <block  wx:for="{{list}}"  wx:for-item="item"  wx:for-index="index"  class="111"  >    {{item.id}}    {{item.name}}  </block>