专栏首页极客起源微信小程序开发实战(4):列表渲染

微信小程序开发实战(4):列表渲染

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

<view wx:for="{{array}}">
    {{item}}
</view>

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

1. 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数组的元素值。

2. wx:for-index

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

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

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

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>

显示的效果如下图所示。

4. 嵌套循环

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>

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

本文分享自微信公众号 - 极客起源(geekculture),作者:geekori

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序开发实战(3):条件渲染

    其中wx:if是一个控制属性,condition是条件表达式。如果condition的值为true,则输出<view>组件中的值。如果有多个条件,和if语句的条...

    蒙娜丽宁
  • 微信小程序开发实战(1):容器组件

    本文主要介绍了滚动视图组件(scroll-view)的各种常用功能,例如,垂直和水平滚动、滚动事件等,并通过例子代码来演示这些功能的使用方法。

    蒙娜丽宁
  • 小程序开发实战(5):组件复用利器-模板

    根据我们前面讲解的知识,很容易看出,这段布局代码的作用是绘制两行带背景色的方块,效果如图1所示。

    蒙娜丽宁
  • 微信小程序入门(三)

    四个组成部分,其它三个前面介绍过了,主要WXS: WXS:对wxml增强的一种脚本语言,可以对请求的数据进行filter或者做计算处理,帮助wxml快速构建出...

    zhang_derek
  • 小程序 — 选项卡

    (2)将用户点击传过来的index值赋给data中改变当前的索引值activeIndex

    Ewall
  • uni-app提交表单成功之后跳转首页

    功能需求: 1:填写表单内容,点击提交审批按钮,提交成功之后,弹出弹框,提示已经提交成功。2:提交成功之后,两秒钟之后自动跳转到首页

    祈澈菇凉
  • OpenCV添加中文(五)

    Java中文社群_老王
  • 购物车

    达达前端
  • View的滑动方式 详细介绍

    用于追踪手指滑动速度的。例如相册的图片,手指快速左右滑动会切换图片,慢则不会切换。获取速度前,要先调用computeCurrentVelocity计算速度,如下...

    胡飞洋
  • OpenCV添加中文(五)

    OpenCV添加文字的方法putText(...),添加英文是没有问题的,但如果你要添加中文就会出现“???”的乱码,需要特殊处理一下。 下文提供封装好的(代码...

    Java中文社群_老王

扫码关注云+社区

领取腾讯云代金券