【微信小程序】条件渲染列表渲染原来这样用？

本文链接：https://blog.csdn.net/Javascript_tsj/article/details/125509695

本文详细介绍了小程序WXML中的wx:if条件渲染，包括基本语法、wx:elif和wx:else的使用，以及hidden控制元素隐藏的方法。此外，还涵盖了wx:for循环用于列表渲染，展示了如何根据数组动态生成元素，以及wx:key的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

🍓4. wx:if 与 hidden 的对比

WXML 模板语法 - 条件渲染

🍊1. wx:if

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

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

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

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

js：

Page({

data: {
  type:1
},


})

因为type的值为1，所以：

例如：

WXML:

<view wx:if="{{type==1}}">主色调</view>
<view wx:elif="{{type==2}}">普通按钮</view>
<view wx:else>无</view>

<button type="primary" size="mini" wx:if="{{type==1}}">主色调</button>
<button size="mini" wx:if="{{type==2}}">普通按钮</button>

JS和上面的一样

效果：

🍋2. 结合 <block> 使用 wx:if

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

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

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

🍉3. hidden

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

<view hidden="{{false}}">hidden</view>

hidden 中 false 表示不隐藏组件

true表示隐藏组件

🍓4. wx:if 与 hidden 的对比

① 运行方式不同

wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏

hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏

② 使用建议

频繁切换时，建议使用 hidden

控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换

WXML 模板语法 - 列表渲染

🥭1. wx:for

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

<view wx:for="{{arry}}">
索引是：{{index}},item项是:{{item}}
</view>

JS:

Page({

data: {
  arry:['橘子','苹果','香蕉']
}


})

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

效果：

🍍2. 手动指定索引和当前项的变量名

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

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

示例代码如下：

🥝3. wx:key 的使用

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

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

JS:

Page({

data: {
 userList:[
   {id:1,name:'热'},
   {id:2,name:'爱'},
   {id:3,name:'编'},
   {id:4,name:'程'},
   {id:5,name:'的'},
   {id:6,name:'小'},
   {id:7,name:'白'},
   {id:8,name:'白'},
 ]
}


})

效果：