【小程序教程】微信小程序之条件渲染_微信小程序开发的条件渲染

微信小程序条件渲染
在微信小程序中，条件渲染是一种非常实用的技术，它允许我们根据条件来决定是否显示某个组件或页面。通过条件渲染，我们可以动态地呈现用户界面，根据用户的输入、数据或其他条件来做出相应的调整。

一、使用wx:if实现条件渲染

wx:if是微信小程序中用于条件渲染的指令，它的语法如下：

<view wx:if="{{condition}}">  <!-- 组件内容 --></view>
1

其中，condition是一个表达式，用于判断是否应该显示该组件。如果condition的值为true，则该组件会被渲染出来；如果为false，则该组件会被隐藏。
例如，以下代码演示了如何根据用户的性别来显示不同的欢迎语：

<view wx:if="{{user.gender == 'male'}}">  
  <text>欢迎来到我的小程序，先生！</text>
</view>
<view wx:else>  
  <text>欢迎来到我的小程序，女士！</text>
</view>
1
2
3
4
5
6

在这个例子中，如果user的gender属性为'male'，则显示"欢迎来到我的小程序，先生！“；否则显示"欢迎来到我的小程序，女士！”。

二、使用wx:else和wx:elif指令

除了wx:if指令外，微信小程序还提供了wx:else和wx:elif指令，用于在条件语句中添加多个分支。wx:else指令用于处理与wx:if指令相反的条件，而wx:elif指令用于添加更多的条件分支。
以下是使用wx:else和wx:elif指令的示例：

<view wx:if="{{score > 90}}">
  <text>优秀！</text>
</view>
<view wx:elif="{{score > 60}}">
  <text>及格了！</text>
</view>
<view wx:else>
  <text>还需努力！</text>
</view>
1
2
3
4
5
6
7
8
9

在这个例子中，根据score的值，显示不同的文本消息。如果score大于90，显示"优秀！“，如果score大于60，显示"及格了！”，否则显示"还需努力！"。

三 block结合wx:if使用

在微信小程序中，结合block和wx:if来根据条件动态地显示或隐藏（block）。
使用block标签可以创建一个块级元素，它可以包含其他的组件或文本。然后，你可以在block标签上使用wx:if指令来根据条件来控制该块的显示和隐藏。
下面是一个使用block和wx:if结合的示例：

<block wx:if="{{condition}}">
  <!-- 块级内容 -->
  <text>这是块级内容</text>
</block>
1
2
3
4

在上面的示例中，condition是一个变量，用于控制是否显示该块。如果condition的值为true，则该块会被显示出来；如果为false，则该块会被隐藏。

你也可以在block标签内部使用多个组件或文本，这些都会在条件成立时一起显示出来。

<block wx:if="{{condition}}">
  <text>这是第一段内容</text>
  <text>这是第二段内容</text>
  <image src="image.jpg" />
</block>
1
2
3
4
5

上面的示例中，当condition的值为true时，三个子组件（两个文本和一个图片）将一起显示出来。如果condition的值为false，则整个块级内容都会被隐藏。

四 hiden实现条件渲染

微信小程序中，可以使用 hidden 属性来实现条件渲染，即当满足特定条件时，显示或隐藏一个组件。

在使用 hidden 属性时，需要将其设置为一个布尔类型的值，当值为 true 时，该组件将隐藏不可见；当值为 false 时，该组件将显示。

下面是一个使用 hidden 属性实现条件渲染的示例：

<view>
  <view hidden="{{flag}}">
    这段文本只有在 flag 为 false 时才会显示
  </view>
  <view hidden="{{!flag}}">
    这段文本只有在 flag 为 true 时才会显示
  </view>
</view>
1
2
3
4
5
6
7
8

在上述示例中，我们利用 hidden 属性来根据 flag 的值来实现条件渲染。当 flag 为 false 时，第一个 view 组件将显示，第二个 view 组件将隐藏；当 flag 为 true 时，第一个 view 组件将隐藏，第二个 view 组件将显示。

使用 hidden 属性可以快速实现条件渲染，并且在页面渲染时不会占用空间，提高了页面的渲染速度和性能。

五 wx:if vs hidden

因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

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

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

六、注意事项

在使用条件渲染时，需要注意以下几点：

条件渲染的组件会被缓存，当条件不成立时不会被销毁，下次再次成立时可以复用。因此，对于一些不经常改变的条件，建议使用条件渲染而不是重复渲染。
条件渲染的组件会被渲染出来，即使条件不成立也不会被销毁。因此，在某些场景下可能会导致性能问题。如果需要频繁切换条件，建议使用动态数据绑定来实现。