微信小程序day01_13之小程序视图层列表渲染

java持续实践

于 2019-03-09 10:15:56 发布

阅读量327

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_33229669/article/details/88139960

微信小程序专栏收录该内容

49 篇文章

订阅专栏

本文深入讲解小程序中列表渲染的实现方式，包括wx:for的基本用法、注意事项及如何使用wx:for-item和wx:for-index自定义变量名。同时，探讨了使用view和block标签在渲染列表时的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

列表渲染

官网文档
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html

wx:for
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
代码示例:
在js中定义如下的数组

Page({
  /**
   * 页面的初始数据    
   */
  data: {
    users: [
      {name: "jack"},
      {name: "rose"},
      {name: "lily"}
    ]
  }
 })

在页面中引用如下

<view class='container'>
  <view wx:for="{{users}}">
      下标: {{index}} , 姓名 : {{item.name}}
  </view>
</view>

最终显示效果如下, 成功进行了数组的遍历

使用 wx:for-item 可以指定数组当前元素的变量名,即可以改变默认的当前元素item，
使用 wx:for-index 可以指定数组当前下标的变量名,可以改变默认的下标index：
代码示例

 <view wx:for="{{users}}" wx:for-index="idx" wx:for-item="itemName">
      下标: {{idx}} , 姓名 : {{itemName.name}}
  </view>

显示效果如下, 同样进行了遍历

block wx:for
以渲染一个包含多节点的结构块
代码示例

<view class='container'>
  <view wx:for="{{users}}">
      下标: {{index}} , 姓名 : {{item.name}}
  </view>

  <block wx:for="{{users}}">
      下标: {{index}} , 姓名 : {{item.name}}
  </block>

</view>

效果如图所示, 用block标签的没有换行, 使用view标签的换行了.

关于列表渲染的注意事项

1.当 wx:for 的值为字符串时，会将字符串解析成字符串数组

例如代码如下:

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

会等同于如下

<view wx:for="{{['a','r','r','a','y']}}">
  {{item}}
</view>

页面中实际渲染如下:

2. 花括号和引号之间如果有空格，将最终被解析成为字符串

例如代码如下

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>

等同于如下的代码

<view wx:for="{{[1,2,3] + ' '}}">
  {{item}}
</view>

实际渲染如下, 会有空格隔开.