微信小程序-WXML列表渲染

WXML 中的列表渲染

在组件上使用 wx:for 控制属性绑定一个数组/数字/字符串, 即可使用数组中各项的数据重复渲染该组件，wx:for 默认自动将当前遍历到的数据放到 item 变量中，会自动将当前遍历的索引放到index变量中，如果想修改保存数据的变量名称，或修改保存索引的变量名称，我们可以：

• 使用：wx:for-item 可以指定数组当前元素的变量名；
• 使用 wx:for-index 可以指定数组当前下标索引的变量名；

遍历数组

<view wx:for="{{ [1, 3, 5, 2, 10] }}">
  <text>{{ '索引：' + index }}</text>
  <text>{{ '值' + item }}</text>
</view>

遍历数字

<view wx:for="{{ 6 }}">
  <text>{{ '索引：' + index }}</text>
  <text>{{ '值' + item }}</text>
</view>

遍历字符串

<view wx:for="{{ 'BNTang' }}">
  <text>{{ '索引：' + index }}</text>
  <text>{{ '值' + item }}</text>
</view>

自定义保存当前遍历到数据的变量名称

<view wx:for="{{ [1, 3, 5, 2, 10] }}" wx:for-item="ch">
  <text>{{ '索引：' + index }}</text>
  <text>{{ '值' + ch }}</text>
</view>

自定义保存当前遍历到索引的变量名称

<view wx:for="{{ [1, 3, 5, 2, 10] }}" wx:for-index="idx">
  <text>{{ '索引：' + idx }}</text>
  <text>{{ '值' + item }}</text>
</view>