微信小程序知识点整理(三)——条件渲染与列表渲染

一、条件渲染

wx:if

• 在小程序中，使用 wx:if="{{condition}}"来判断是否需要渲染该代码块
• 也可以用 wx:elif 和 wx:else 来添加一个 else 块

<view wx:if="{{flag > 10}}">hh</view>
<view wx:elif="{{flag == 10}}">xx</view>
<view wx:else>gg</view>

block wx:if

• 因为 wx:if 是一个控制属性，需要将它添加到一个标签上。
• 如果要一次性判断多个组件标签，可以使用一个 <block></block> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
• <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

<block wx:if='{{ flag == 10 }}'>
  <view>JavaScript</view>
  <view>HTML</view>
  <view>CSS</view>
</block>

hidden

• 使用 hidden="{{condition}}" 也能控制元素的显示与隐藏

<view hidden="{{ flag == 10}}">hidden</view>

为true隐藏，为false 显示

hidden 和 wx:if 的区别

• 被 wx:if 控制的区域，框架有一个局部渲染的过程，会根据控制条件的改变，动态创建或销毁对应的 UI结构。类似Vue中的v-if
• wx:if 是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
• 相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。类似Vue中的v-show
• 总结：wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

二、列表渲染

wx:for

• 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
• 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

<view wx:for='{{ arr }}' wx:key='index'>
  我是{{ item }} -- 索引是 {{ index }}
</view>

block wx:for

• wx:for 可以用在 <block></block> 标签上，以渲染一个包含多节点的结构块。

<block wx:for='{{ arr }}' wx:key='index'>
  <view>值：{{item}}</view>
  <view>索引:{{index}}</view>
</block>

指定索引和当前项的变量名

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

<view wx:for='{{ arr }}' wx:for-item='foritem' wx:for-index='forindex' wx:key='index'>
  我是{{ foritem }} -- 索引是 {{ forindex }}
</view>

列表渲染中的 wx:key

1. wx:key 的作用说明

• 如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容，<checkbox/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

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

2. wx:key 的注意事项

• key 值必须具有唯一性，且不能动态改变
• key 的值必须是数字或字符串
• 保留关键字 *this 代表在 for 循环中的 item 本身，它也可以充当 key 值，但是有以下限制：需要 item 本身是一个唯一的字符串或者数字。
• 如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。