列表对象转数组 微信小程序_12. 教你零基础搭建小程序：模板语法—列表渲染...

今天要讲的是模板语法的第二个种类——列表渲染。

点击下方链接，查看列表渲染部分的使用说明和介绍。

列表渲染 | 微信开放文档​developers.weixin.qq.com

（一）vx: for 属性

wx:for ——列表循环 官方文档的描述解释如下：

在组件上使用 wx:for 控制属性绑定一个数组，
即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，
数组当前项的变量名默认为 item

我们在开发者工具中具体演示。

1、在demo03. js 文件中，插入一个数组 list，代码如下：

list:[ 
{
  id:0,
  name:"职业"
},
{
  id:1,
  name:"程序媛"

},
{
  id:2,
  name:"程序猿"
}
    ]

这样就定义好了一个数独数据。复制 list , 在demo03.wxml 文件中，编辑列表循环标签。

其中，wx:for的写法：

wx:for="{{数组或对象}}"

其中，对象也可是循环对象。

wx:for-item="循环项的名称"

wx:for-index="循环项的索引"

本次举例中的 wx:for 代码如下：

<view>
<view
 wx:for="{{list}}"
 wx:for-item="item"
 wx:for-index="index">
  索引：{{index}}
  值：{{item.name}}
 </view>
</view>

按下保存键，最终的呈现界面如下：

此时，看调试器--console 中，出现黄色warning，内容如下

wx:key 可用来提高列表渲染的性能。

今天太晚了~我们明天继续~未完待续==

---

（二）wx: key 控制属性

在wxml 文件中，需要wx:key =“唯一的值”，用来提高列表渲染的性能

在标签文档中，wx: key 的“唯一值”以两种形式提供。

1、绑定字符串
2、循环项。

1、字符串

如果wx: key 绑定的是一个普通的字符串的时候，

那么这个字符串名称一定要是循环数组中的对象的唯一属性。

比如在上面的循环对象中，我们在view 标签后加入代码

 wx:key="id"

按下保存键后，可发现控制台的有关 wx:key 属性的warning 消失。

这里要强调的一点是，

在上述数组中，wx:key 中的 id 是唯一属性，

它的值 0，1，2 都是不重复的。

2、循环项

wx:key=“* this”

此代码就表示该数组为普通数组，* this 这里表示循环项。

比如：

当你所用的数组为普通数组，像 [1,2,3,4] 或者[11,22,aaa] 等
要绑定 wx:key 时，就要用到它—— * this

ps:

使用此属性时，若 wx:key 所绑定的数组不是js 文件中的循环数组，
若插入到标签文件中时，是不会报错的。

比如，

上面的demo03.wxml 文件中，我们在view 标签中随便插入一个数组，

wx:key=”aa“，保存后，控制台也不会报错的。

操作如下：

2.1 嵌套循环

我们在写代码的时候，经常会碰到循环里面套循环的情况。

在上面例子中，我们一开始已经命名为

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

如果再在里面放第二层循环的话，以上就要重新命名，否则会重名。

所以，当数组中有嵌套循环的时候，尤其要注意，以下绑定的名称不要重名。

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

并且，在默认情况下，小程序会将循环项、索引项的名称当成 item 和 index 。

若数组中只有一层循环时，以下可省略

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

我们在微信开发者工具中尝试一下，

删除demo03.wxml文件中的这两个属性，

保存，看结果是否有变化

对比结果来看，有无 wx:for-item="item" wx:for-index="index" ，

结果都是一样的。

因此，当数组中只有一层循环项，

wx:for-item="item" wx:for-index="index" 两个属性可不写。

2.2 对象循环

当含有2个及以上的数组或者对象时，循环项的名称（item）需要修改

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

拿上一章 ”person “举例，

在deom03.wxml 文件中，将索引项修改为”属性“，代码如下：

<view>
<view
 wx:for="{{person}}"
 >
  属性：{{index}}
  值：{{item}}
 </view>
</view>

保存后，结果如下：

由结果可得，以上使用 item 、index 是没有问题的，但是我们看上面所得结果，

名称过于繁琐，让人理解起来也有些困难。

所以，建议在数组中循环对象时，需要将 item 、index 的名称修改一下，

按照习惯，我们修改为 value、key 。

即在wxml 文件中将

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

修改为：

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

完整代码如下：

<view>
<view
 wx:for="{{person}}" wx:for-item="value" wx:for-index="key"
 >
  属性：{{key}}
  值：{{value}}
 </view>
</view>

保存后，可以对比前后修改的界面，产出是一样的。

但是，我们会在控制台看到如下warning

意为：需要提供 wx: key 来提高微信的技术性，完善性能。

所以，需要在此基础上绑定 wx: key ，添加一行代码 wx:key="唯一的属性"，

在 person 这个对象中，age 、height、weight等属性都是唯一的，

这里的唯一属性我们写的 age ，

当然也可以写其中任何一项，因为都具有唯一性。

修改如下：

<view>
<view
 wx:for="{{person}}" 
 wx:for-item="value" 
 wx:for-index="key"
 wx:key="age"
 >
  属性：{{key}}
  值：{{value}}
 </view>
</view>

保存后，可以看到控制台的warning 消失。

（三）补充：block 标签

在标签文件中插入block 标签进行页面渲染时，保存代码后，

系统会自动移除block 标签，因为这里的block 标签属于占位符。

比如：

demo03.wxml 文件中， list 数组中加入类名 class="my_list" , 代码如下：

<view>
<view 
wx:for="{{list}}" 
wx:for-item="item"
wx:for-index="index"
wx:key="id"
class="my_list">
  索引：{{index}}
  值：{{item.name}}
 </view>
</view>

保存后，可看到控制台的wxml 中，显示了class标签

如果，我们在上述的代码中加入block 标签后，代码如下

<view>
<block 
wx:for="{{list}}" 
wx:for-item="item"
wx:for-index="index"
wx:key="id"
class="my_list">
  索引：{{index}}
  值：{{item.name}}
 </block>
</view>

保存后，对比前后加不加 block 标签的结果，可以看到，

加入block标签后，调试器中的class 标签消失。

所以，

由此可见，

当你使用循环对象进行页面渲染时，

若不想在对象外面额外加一层标签的话，

可用 block标签 来占位 。