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

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

1. 如果需要对默认的变量名和下标进行修改，可以使用 wx:for-item 和 wx:for-item：
   • 使用 wx:for-item 可以指定数组当前元素的变量名
   • 使用 wx:for-index 可以指定数组当前下标的变量名
2. 将 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>

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

参考视频：尚硅谷微信小程序开发教程