小程序 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>

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

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