【小程序从0到1】小程序条件渲染｜列表渲染

欢迎来到我的博客
📔博主是一名大学在读本科生，主要学习方向是前端。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏
🛠目前正在学习的是🔥$React/小程序$🔥，中间穿插了一些基础知识的回顾
🌈博客主页👉codeMak1r.小新的博客

本文被专栏【小程序｜原力计划】收录

🕹坚持创作✏️，一起学习📖，码出未来👨🏻‍💻！

上篇文章详细讲解了微信小程序一些模版语法，比如数据绑定｜事件绑定的一些基本使用，这篇文章将带领大家学习的是小程序的「条件渲染｜列表渲染」

条件渲染

wx:if ｜wx:elif｜wx:else

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

<view wx:if="{{condition}}">True</view>

上面的代码用data中的一个数据condition来判断页面中是否显示这个view组件。
也可以用wx:if和wx:else来添加else判断：

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

大家只要记住这一点：
wx:if ⇒ v-if
wx:elif ⇒ v-else-if
wx:else ⇒ v-else
其实小程序对于有一些前端基础的人还是比较亲和的，语法糖的封装与vue很像，操作数据的setXxx方法与React很像……

结合< block>使用wx:if

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

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

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

可以类比是vue的template ｜ React的Fragment

hidden

在小程序中，直接使用hidden="{{ condition }}"也能控制元素的显示与隐藏。

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

上面的代码用data中的condition数据来控制此view的显示与隐藏。
若 condition 为true，则view隐藏；若 condition 为false，则view显示。
hidden ⇒ v-show

wx:if 与 hidden对比

• 运行方式不同
• 1. wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏；
• 2. hidden 以切换元素的样式（display: none/block），控制元素的显示与隐藏。
• 使用建议
• 1. 频繁切换，建议使用 hidden；
• 2. 控制条件复杂时，建议使用 wx:if 搭配 wx:elif和wx:else进行展示与隐藏的切换

列表渲染

wx:for

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

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

array: [ "aaa", "bbb" ]

默认情况下，当前循环项的索引用 index 表示；当前循环项用 item 表示

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

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

示例代码如下

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

此时的效果与上图中是一样的，此方法只不过是用来设置变量的名称，仅需注意，修改了变量的名称之后，使用变量的时候需要使用最新修改过后的名称。

wx:key 的使用

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

JS

data: {
	userList: [
      { id: 1, name: '小红' },
      { id: 2, name: '小黄' },
      { id: 3, name: '小蓝' },
    ]
}

WXML

<view wx:for="{{userList}}" wx:key="id">
  {{item.name}}
</view>