当前位置：首页 > news >正文

小程序 wxml 语法 —— 41列表渲染 - 进阶用法

news 来源：原创 2025/6/12 13:47:44

这一节讲解列表渲染的两个进阶用法：

如果需要对默认的变量名和下标进行修改，可以使用 wx:for-item 和 wx:for-item：
- 使用 wx:for-item 可以指定数组当前元素的变量名
- 使用 wx:for-index 可以指定数组当前下标的变量名
将 wx:for 用在标签上，以渲染一个包含多个节点的结构块
- 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性；
- 标签在 wxml 中可以用于组织代码结构，支持列表渲染、条件渲染等；

下面打开微信开发者工具，演示一下这两个进阶用法：

进阶用法一

在 pages/cate/cate.js 中添加数据声明，如下：

Page({
  data: {
    numList: [1,2,3],
    fruitList: [
      {id: 1, name: '🍎'},
      {id: 2, name: '🍋'},
      {id: 3, name: '🍅'}
    ],
    obj: {
      name: 'tom',
      age: 10
    }
  }
})

在 pages/cate/cate.wxml 中添加进阶用法一的演示代码，如下：

<!-- 如果需要修改默认的变量名，需要使用 wx:for-item 属性-->
<!-- 如果需要修改默认的下标变量名，需要使用 wx:for-index 属性-->
<!-- 两个属性需要和 wx:for 写到同一个组件上 -->
<!-- 在重命名后，需要使用最新的变量名获取数据信息 -->
<!-- 数组 -->
<view wx:for="{{ fruitList }}" wx:key="id" wx:for-item="fruitItem" wx:for-index="i">
  {{ fruitItem.name }}
</view>

<!-- 对象 -->
<view wx:for="{{ obj }}" wx:key="key" wx:for-item="value" wx:for-index="key">
  {{ value }} - {{ key }}
</view>

刷新页面，可以看到具体的演示效果如下：

在这里插入图片描述

进阶用法二

在 pages/cate/cate.js 中添加数据声明，如下：

Page({
  data: {
    numList: [1,2,3],
    fruitList: [
      {id: 1, name: '🍎', price: 66},
      {id: 2, name: '🍋', price: 77},
      {id: 3, name: '🍅', price: 88}
    ],
    obj: {
      name: 'tom',
      age: 10
    }
  }
})

在 pages/cate/cate.wxml 中添加页面样式，如下：

<!-- 方法一 -->
<view wx:for="{{ fruitList }}" wx:key="id" wx:for-item="fruitItem" wx:for-index="i">
  <view>名字：{{ fruitItem.name }}</view>
  <view>价格：{{ fruitItem.price }}</view>
</view>

<!-- 方法二 -->
<!-- block 不是一个组件，只是渲染元素 -->
<!-- 也就是只是包装元素，可以组织代码结构，支持列表渲染 -->
<!-- block 不会在页面中做任何渲染，只接受控制属性 -->
<block wx:for="{{ fruitList }}" wx:key="id" wx:for-item="fruitItem" wx:for-index="i">
  <view>名字：{{ fruitItem.name }}</view>
  <view>价格：{{ fruitItem.price }}</view>
</block>