【小程序】条件渲染 & 列表渲染

条件渲染

• 可以使用 wx:if="" 来控制组件的渲染

<view wx:if="{{flag}}">不渲染（变量）</view>
<view wx:if="flag">渲染（字符串）</view>
<view wx:if="">不渲染（空字符串）</view>
<view wx:if=" ">渲染（空格字符串）</view>

data: { flag: false },

• 可以搭配 wx:elif、 wx:else 使用
• 此时 wx:if、wx:elif、wx:else 作用的标签必须写到一块

<view wx:if="{{age >= 18}}">成年人</view>
<view wx:elif="{{age < 18}}">未成年人</view>
<view wx:else>不是人</view>

block 标签

如果要一次性判断多个组件标签，可以配合 block 标签使用

<block wx:if="{{true}}">
    <view> view1 </view>
    <view> view2 </view>
</block>

block 标签仅作包裹作用，不会在页面中做任何渲染

hidden 属性

• 通过改变 display 样式来控制元素的隐藏
• 不能与 block 标签配合使用

<view hidden="{{false}}"> false - 不隐藏 </view>

wx:if vs hidden

• wx:if 会确保条件块在切换时 [销毁] / [重新渲染]

  wx:if 是惰性的，不显示则不渲染

• 相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗
因此，如果需要频繁切换的情景下，用 hidden 更好；如果在运行时切换不频繁则 wx:if 较好

列表渲染

• 给组件标签设置 wx:for="{{arr}}"，即可遍历数组中的元素，并将其渲染出来
• 默认情况下，可以直接使用 index 表示当前元素的下标、item 表示当前元素的值

<view wx:for="{{arr}}">{{index}} - {{item}}</view>

data: { arr: ["JS", "HTML", "CSS"] },

• 可以设置： wx:for-item="元素名" 修改当前元素名、 wx:for-index="下标名" 修改当前元素的下标名

<view wx:for="{{arr}}" wx:for-index="i" wx:for-item="val">{{i}} - {{val}}</view>

配合 block 标签使用

<block wx:for="{{arr}}">
    <view>index：{{index}}</view>
    <view>item：{{item}}</view>
</block>

wx:key="唯一标识"

如果列表中项目的顺序会被打乱，且希望项目保持自己的特征和状态（eg：input 中的输入内容 / switch 的选中状态）
则需要设置 wx:key="唯一标识" 以指定项目的唯一标识

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

如不设置 key 属性，控制台会抛出警告
如果明确知道该列表是静态，或者不必关注其顺序，可以 [忽略] / [设置为 index]

<button type="primary" bindtap="addUser">点击新增用户</button>
<view wx:for="{{arr}}" wx:key="index">
	<checkbox /> {{index}} - {{item}}
</view>

Page({
    data: { arr: ["JS", "HTML", "CSS"] },
    addUser(e) {
        // this 指向当前 Page 实例
        let tempArr = this.data.arr; // 临时数组
        let num = this.data.arr.length + 1;
        let newUser = "Book" + num; // 创建新数据
        tempArr.unshift(newUser); // 添加新数据
        this.setData({ arr: tempArr }); // 更新 data 数据
    },
});

• 此时我们先选中一些复选框，然后点击按钮添加数据
  会发现，新增的复选框被选中了，而原来被选中的复选框被移到了下面，且没有被选中
• 这与小程序的底层算法有关，在添加新标签时，框架会最大化复用已有的标签，而出现选中的复选框始终在最上方的情况
• 此时我们可以设置 wx:key="唯一标识"，如果 key 值不一样，则无法复用

wx:key 的 2 种设置

1. 字符串：可以是 item / index，也可以是 arr 元素的某个 property 值（得能充当唯一标识，且不能动态改变）

2. 保留关键字 *this：等效于 wx:key="item"

   注意：对于 [对象数组]，不能使用 *this 作为 key 值，因为数组的元素是对象，转成字符串都为 [Object object]

<button type="primary" bindtap="addUser">点击新增用户</button>
<view wx:for="{{arr}}" wx:key="*this">
	<checkbox /> {{index}} - {{item}}
</view>

遍历其他复合数据

1. 遍历 [对象] 数据：index-对象属性、item-对象的属性值

<view wx:for="{{objMsg}}" wx:key="*this"> {{index}} - {{item}} </view>

data: { objMsg: { name: "superman", age: 21 } },

2. 遍历 [字符串] 数据：index-下标、item-对应字符

<view wx:for="{{strMsg}}" wx:key="*this"> {{index}} - {{item}} </view>

data: { strMsg: "message" },

等效于遍历 [字符串] 数组

<view wx:for="{{strArr}}" wx:key="*this"> {{index}} - {{item}} </view>

data: { strArr: ["m", "e", "s", "s", "a", "g", "e"] },

• 如果 [花括号] 和 [引号] 之间有 空格，会被解析成：数组数据 + " "

<view wx:for=' {{["m", "e", "s", "s", "a", "g", "e"]}}' wx:key="*this"> {{index}} - {{item}} </view>
<view wx:for='{{" " + ["m", "e", "s", "s", "a", "g", "e"]}}' wx:key="*this"> {{index}} - {{item}} </view>

提示：数组转字符串 ['s', 't', 'r'] + '' → s,t,r