微信小程序开发实战（4）：列表渲染
-————支持作者请转发本文—————-
小程序还为我们提供了用于循环的列表渲染。通过wx:for属性，可以对数组进行循环，以便获取数组中的每一个元素，这一过程不需要编写一行JavaScript代码。下面是列表渲染的语法。
<view wx:for="{{array}}">{{item}}</view>
其中array是待循环的数组，item是默认的变量，表示数组中每一个元素。
- wx:for-item
尽管通过默认的item变量，可以获取数组中的元素，但在有时，我们还是希望使用自定义的变量，这样会让代码更容易阅读。因此，可以使用wx:for-item属性执行自定义变量名。使用默认的item变量和使用wx:for-item属性自定义变量名的布局代码如下：
使用默认的item变量
<view wx:for="{{messages}}" >{{item}}</view>
使用自定义的变量名
<view wx:for="{{messages}}" wx:for-item="itemName" >{{itemName}}</view>
其中messages是在index.js中定义的一个数组变量，代码如下：
Page({data: {messages:["辽宁","北京","广东","湖北","广西"],})
运行后，系统会纵向输出messages数组的元素值。
- wx:for-index
使用wx:for-index指定的变量可以获取当前数组的索引（从0开始），例如，下面的布局代码会同时输出当前数组的索引和数组的值。
<view wx:for="{{messages}}" wx:for-item="itemName" wx:for-index="i" >messages[{{i}}] = {{itemName}}</view>
运行后，会显示如图下图所示的输出内容。
- block wx:for
wx:for也可以用于block中，例如，下面的布局代码对数组[1,2,3,4,5]进行循环，分别输出每一个数组元素，以及数组元素的平方。
<block wx:for="{{[1, 2, 3, 4, 5]}}"><view> [{{index}}] = {{item}} </view><view> [{{index}}] * [{{index}}] = {{item * item}} </view></block>
显示的效果如下图所示。
- 嵌套循环
wx:for和普通的for循环一样，同样可以嵌套。例如，下面的布局代码使用两层wx:for，并结合wx:if和wx:elif进行条件判断。
<view wx:for="{{[1, 5, 9]}}" wx:for-item="i"><view wx:for="{{[2, 6, 4]}}" wx:for-item="j"><view wx:if="{{i <= j}}">{{i}} * {{j}} = {{i * j}}</view><view wx:elif="{{i > j}}">{{i}} + {{j}} = {{i + j}}</view></view></view>
布局的显示效果如下图所示。
block wx:for同样可以嵌套使用，例如，要实现和图4-7相同效果的布局，只需要将上面布局代码的view wx:for改成block wx:for即可。
<block wx:for="{{[1, 5, 9]}}" wx:for-item="i"><block wx:for="{{[2, 6, 4]}}" wx:for-item="j"><view wx:if="{{i <= j}}">{{i}} * {{j}} = {{i * j}}</view><view wx:elif="{{i > j}}">{{i}} + {{j}} = {{i + j}}</view></block></block>
- wx:key
注意，本节的例子为了掩饰会使用后面章节介绍的一些组件，如switch、button等，读者无需理会这些组件的具体用法，后面章节会详细讲解。这个例子目的是为了理解wx:key的作用。
下面先在index.js文件中定义两个数组，其中objectArray是对象数组，numberArray是数值数组，代码如下：
Page({data: {objectArray: [{id: 0, unique: 'key0'},{id: 1, unique: 'key1'},{id: 2, unique: 'key2'},{id: 3, unique: 'key3'},{id: 4, unique: 'key4'},{id: 5, unique: 'key5'},],numberArray: [1, 2, 3, 4]}… …})
其中objectArray的每一个元素有两个属性：id和unique，其中unique属性的属性值一定是唯一的。
现在编写如下的布局代码。
<switch wx:for="{{objectArray}}" style="display: block;"> {{item.id}} </switch><button bindtap="switch"> Switch </button>
这段布局代码中使用了两个组件：switch和button。前者是选择组件（类似于Checkbox），后者是按钮组件。bindtap属性指定了点击按钮后要调用的函数（相当于单击事件）。运行这段布局代码后，会显示如下图所示的效果。
往期回顾：
微信小程序开发实战（1）：容器组件
微信小程序开发实战（2）：添加广告轮询图
微信小程序开发实战（3）：条件渲染
对本文感兴趣，可以加李宁老师微信公众号（unitymarvel）：
关注 极客起源 公众号，获得更多免费技术视频和文章。
矫情吗；*
Bertha 。
左手的ㄟ右手
系统管理员
还没有评论，来说两句吧...