列表渲染#

列表渲染：就是指通过循环遍历一个数组或对象,将其中的每个元素渲染到页面上

只需要在组件上使用 wx:for 属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件

默认数组当前项的变量名默认为 item

默认数组的当前项的下标变量名默认为 index

在使用 wx:for 对数组进行遍历的时候,建议加上 wx:key 属性,如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,即以后数据不会改变,或者不必关注其顺序,可以选择忽略。

wx:key 的值以两种形式提供：

1. 字符串：代表需要遍历的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变

2. 保留关键字 *this 代表在 for 循环中的 item 本身,当 item 本身是一个唯一的字符串或者数字时可以使用

当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且 提高列表渲染时的效率 。

📌 注意事项：

​ 在使用 wx:for 对数组进行遍历的时候,建议加上 wx:key 属性,否则控制台会报警告

1<view wx:for="{{要循环的数据}}" :key="*this / id">
2  {{item}}
3  {{index}}
4<view>

修改默认下标和变量名#

如果需要对默认的下标和变量名进行修改,可以使用 wx:for-item 和 wx:for-index

1. 使用 wx:for-item 可以指定数组当前元素的变量名

2. 使用 wx:for-index 可以指定数组当前下标的变量名

1<view wx:for="{{ animal }}" wx:for-item="itemName" wx:for-index="i">
2  {{ itemName.name }} - {{ itemName.avatar }} - {{ i }}
3</view>

渲染多节点结构块#

如果需要渲染一个包含多节点的结构块,可以使用一个 <block/> 标签将多个组件包装起来

1<block wx:for="{{ animal }}">
2  <view>
3    <span>{{ item.name }}</span>
4    <span>{{ item.avatar }}</span>
5  </view>
6</block>

注意： <block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。