小程序数据绑定和渲染

发表于 | 更新于: | 分类于
字数统计: 880 | 阅读时长 ≈ 4

数据绑定

页面中所有绑定的数据都来自对应 Page 的 data

简单绑定

通过 Mustache 语法（双大括号） 包裹变量的方式进行数据绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
Page({
    data: {
        message: 'Hello MINA!',
        id: '0',
        flag: true
    }
})

<view>{{ message }}</view>

<view wx:if="{{ flag }}"></view>

<checkbox checked="{{flag}}"> </checkbox>

运算

可以在双大括号内进行简单的运算

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Page({
    data: {
        flag: true,
        a: 1,
        b: 2,
        text: 'world',
        date: [new Date().toLocaleDateString()]
    }
})

<view hidden="{{flag ? true : false}}">Hidden</view>

<view>{{ a + b }} + c</view>

<view wx:if="{{a > 5}}"></view>

<view>{{ "hello" + text }}</view>

<text>{{"hello" + text + ' ' +  date[0]}}</text>

组合

可以在 {{}} 内直接进行组合，构成新的对象或者数组

花括号和引号之间如果有空格，将最终被解析成为字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Page({
    data: {
        zero: 0,
        a: 'a',
        b: 'b',
        first: {
            a: 1
        },
        second: {
            b: 2
        }
    }
})

// [0, 1, 2, 3, 4, 5]
<view wx:for="{{[zero, 1, 2, 3, 4, 5]}}">{{item}}</view>

// {foo: 'a', bar: 'b'}
<template data="{{foo: a, bar: b}}"></template>

// {a: 1, b: 2, c: 3}
<template data="{{...first, ...second, c: 3}}"></template>

渲染

列表渲染

wx:for

在组件（如 view ）或结构块（block，包装元素，只接受控制属性）中通过 ws:for 指令渲染数组中的数据项

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

wx:for 的值为字符串时，会将字符串解析成字符串数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Page({
    data: {
        list: [
            {
                alias: 'first'
            },
            {
                alias: 'second'
            },
            {
                alias: 'third'
            }
        ]
    }
})

<view wx:for="{{list}}">{{index}} : {{item.alias}}</view>
<view wx:for="{{list}}" wx:for-index="idx" wx:for-item="itemNmae">{{idx}} : {{itemNmae.alias}}</view>

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

wx:key

如果列表会发生变动（新增、删除等），且需保持列表项状态（如：<input/> 的内容、<switch/> 的选中状态等），则需要使用 wx:key 来指定列表中数据项的唯一的标识符

wx:key 的值有两种形式：第一种是 item 中不会变动的某个 property 的值（字符串或数字），第二种是保留关键字 *this（代表 item 本身，并且是唯一的字符串或者数字）

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Page({
    data: {
        objectArray: [
            { id: 5, unique: 'unique_5' },
            { id: 4, unique: 'unique_4' },
            { id: 3, unique: 'unique_3' },
            { id: 2, unique: 'unique_2' },
            { id: 1, unique: 'unique_1' },
            { id: 0, unique: 'unique_0' },
        ],
        numberArray: [1, 2, 3, 4]
    }
})

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>

<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>

条件渲染

wx:if

通过 wx:if="{{condition}}" 指令来判断是否需要渲染该代码块，可以作用于组件（如 view ）或结构块（block ）

可以用 wx:elif 或 wx:else 来添加一个 else 块

1
2
3
4
5
6
7
8
9
10
<view wx:if="{{condition}}"> True </view>

<view wx:if="{{length > 5}}">1</view>
<view wx:elif="{{length > 2}}">2</view>
<view wx:else>3</view>

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

wx:if vs hidden

wx:if：变量值发生变动时，会进行局部渲染（销毁或渲染）

hidden：组件始终会渲染，只是控制显示隐藏

hidden 适合频繁切换的场景，wx:if 适合条件不经常变动的场景

1
2
<view wx:if="{{Show}}"></view>
<view hidden='{{!Show}}'></view>