微信小程序开发实战（4）：列表渲染

末蓝、 2023-02-24 08:42 1阅读 0赞

‍‍

\---------支持作者请转发本文-----------

小程序还为我们提供了用于循环的列表渲染。通过wx:for属性，可以对数组进行循环，以便获取数组中的每一个元素，这一过程不需要编写一行JavaScript代码。下面是列表渲染的语法。

其中array是待循环的数组，item是默认的变量，表示数组中每一个元素。

1. wx:for-item

尽管通过默认的item变量，可以获取数组中的元素，但在有时，我们还是希望使用自定义的变量，这样会让代码更容易阅读。因此，可以使用wx:for-item属性执行自定义变量名。使用默认的item变量和使用wx:for-item属性自定义变量名的布局代码如下：

使用默认的item变量

使用自定义的变量名

<view wx:for="{
        {messages}}" wx:for-item="itemName" >
      {
        {itemName}}
    </view>

其中messages是在index.js中定义的一个数组变量，代码如下：

Page({
      data: {
        messages:["辽宁","北京","广东","湖北","广西"],
      }
    )

运行后，系统会纵向输出messages数组的元素值。

2. wx:for-index

使用wx:for-index指定的变量可以获取当前数组的索引（从0开始），例如，下面的布局代码会同时输出当前数组的索引和数组的值。

<view wx:for="{
        {messages}}" wx:for-item="itemName" wx:for-index="i" >
      messages[{
        {i}}] = {
        {itemName}}
    </view>

运行后，会显示如图下图所示的输出内容。

![format_png][]

3.  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>

显示的效果如下图所示。

![format_png 1][]

4. 嵌套循环

wx:for和普通的for循环一样，同样可以嵌套。例如，下面的布局代码使用两层wx:for，并结合wx:if和wx:elif进行条件判断。

布局的显示效果如下图所示。

![format_png 2][]

block wx:for同样可以嵌套使用，例如，要实现和图4-7相同效果的布局，只需要将上面布局代码的view wx:for改成block wx:for即可。

5. 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属性指定了点击按钮后要调用的函数（相当于单击事件）。运行这段布局代码后，会显示如下图所示的效果。

![format_png 3][]

往期回顾：

[微信小程序开发实战（1）：容器组件][1]

[微信小程序开发实战（2）：添加广告轮询图][2]

[微信小程序开发实战（3）：条件渲染][3]

对本文感兴趣，可以加李宁老师微信公众号（unitymarvel）：

![format_png 4][]

关注  极客起源  公众号，获得更多免费技术视频和文章。

![format_png 5][]

‍

[format_png]: /images/20230209/fd9cc9d3c80c4567a9b42b146bacbc68.png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9VT2ljQmljZDl4dG4wbmcwaGtaZ3FHaWNKc2EyNHA4d0Y4d0VaaWNaQ0tOMWpIS0hHbTZGZTdzTGthblhGbTVpYVVKQXEzU2J6cjl4N2NhY0U4aWJ3ajBmT0VRUS82NDA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9VT2ljQmljZDl4dG4wbmcwaGtaZ3FHaWNKc2EyNHA4d0Y4d2lhUUh2WkIyT2xBblBBMmt5MEE2UHBtU3RLcEg4bUdHRVowOEM0aWFYYThKNmliRzZPZEJybFNEZy82NDA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9VT2ljQmljZDl4dG4wbmcwaGtaZ3FHaWNKc2EyNHA4d0Y4d0VMUE9aM1pXelZlTmtBZjFaT3REQmlhWFBMN2w0R1liWlBiWnhiV2VzVUZIUU9Jd3NIMVlUVkEvNjQw?x-oss-process=image/format,png
[1]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd6902b58a1e8ba3cdf5cbef243ca7d238fcb69a2fad8e6056afe18d08787d5413393fc7b5eb&idx=1&mid=2651364419&scene=21&sn=4f08ee94682f107f54b2dc81474fd20c#wechat_redirect
[2]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd6902888a1e8b9e6daa10d07e4c20ebdbaf0a1358c84300a697c3b126a2600a84bc89b8d4f1&idx=1&mid=2651364478&scene=21&sn=3196017aab20e51f5d23f68ab463403f#wechat_redirect
[3]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd69025f8a1e8b496460cb42ecfbddf1545333f47ffc225ef5c6b568bda1696486ba11534f66&idx=1&mid=2651364521&scene=21&sn=50cf1c358c636f01f4ab8903fbe15578#wechat_redirect
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9VT2ljQmljZDl4dG4yVnQyZ1Fzem5oa0U4aWFkRkhOUDIxVk5GTmR2MHJjRmljOXE0MmRpYmliR3h5MWlhY3VENkgzMDc0NlhMUnpwbmVldXlUSkFNZTV2eTJSZkEvNjQw?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9VT2ljQmljZDl4dG4yVTN6Z0ppYzBiQ2JJeDVmNkpjSWljUUx0aWJyOVB0RDNiVWhrT3pLNkxqUENoeDAxb0VjSmdKNEVEMGJoN1R6TzJkaDBoNUxMWDY1Zk93LzY0MA?x-oss-process=image/format,png