微信小程序：7.页面渲染

饭一口口吃2024-04-30 8:32

wx:if

在小程序中，使用wx：if="{{ condition }}"来判断是否需要渲染该代码块

<view wx:if="{{condation}}">你好帅</view>

也可以用wx：if和wx：else来添加else判断：

<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else="{{type === 2}}">保密</view>

结合使用wx：if

如果要一次性控制多个组件的展示和隐藏，可以使用一个**标签**将多个组件包装起来，并在标签上使用wx：if控制属性，示例如下：

<block wx:if="{{false}}">
  <view wx:if="{{type === 1}}">男</view>
  <view wx:elif="{{type === 2}}">女</view>
  <view wx:else="{{type === 2}}">保密</view>
</block>

注意：block并不是一个组件，他只是i一个包裹性质的容器，不会在页面有任何渲染。

hidden

在小程序中，直接使用hidden="{{condition}}" 也可以控制元素的显示和隐藏：

<view hidden="{{flag}}">条件为true 隐藏，条件为false显示</view>

等于true隐藏元素，值为false隐藏元素

wx:if 与 hidden的对比

运行方式不同wx：if是进行dom的移除进行显示隐藏操作
hidden是设置display：none，控制元素的显示和隐藏

使用建议：在频繁切换的时候，使用hidden
控制条件复杂时，建议使用wx：if搭配wx：elif、wx：else进行展示和隐藏

列表的渲染

wx：for

通过wx：for可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：

<view wx:for="{{lists}}">
{{index}}.{{item}}
</view>

手动指定当和当前项变量名

使用：wx：for-index可以指定当前循环项的索引的变量名

使用：wx：for-item可以指定当前项的变量名

<view wx:for="{{lists}}" wx:for-index="idx" wx:for-item="itemName">
  索引是：{{idx}} 当前项是：{{itemName}}
</view>

wx:key 的使用

类似于Vue列表渲染中的Key，小程序在实现列表渲染的时候，也建议为渲染出来的列表项指定唯一的key值，从而提高渲染的效率，示例代码如下：

<view wx:for="{{lists}}" wx:key="index">
{{item}} 
</view>