学习微信小程序WXML之条件渲染

最新推荐文章于 2025-10-30 22:28:59 发布

原创最新推荐文章于 2025-10-30 22:28:59 发布 · 4.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

web前端专栏收录该内容

12 篇文章

订阅专栏

本文是关于学习微信小程序开发的笔记，聚焦于WXML的条件渲染。通过示例解释了当condition变量变化时如何控制页面内容显示，如：wx:if和hidden的区别。wx:if在切换时涉及局部渲染，适合频繁切换；hidden则始终渲染，控制显示隐藏，适用于初始化渲染成本较高的场景。

此贴为学习9 小时搞定微信小程序开发的笔记
文档：条件渲染 · 小程序

这是一个解决今天吃什么这一大难题的一小段代码。

<!--index.wxml -->
<view>今天吃什么？</view>
<view wx:if="{{condition === 1}}">
    饺子
</view>
<view wx:elif="{{condition === 2}}">
    米饭
</view>
<view wx:else>
    面食
</view>

//index.js
Page({
    data:{
        condition: Math.floor(Math.random()*3+1)
    }
})

当页面传入的condition变量的值为1时，今天就吃饺子，当值为2时，今天就吃米饭；当为其他值时，今天就吃面食。js文件里就是condition变量生成一个1-3的随机整数。Math.random()生成0-1的浮点随机数，Math.floor()对浮点数处理来返回一个向下取整的整数。

渲染结果：
这里写图片描述

wx:if和hidden的区别

这两个都能控制元素的显示，但wx:if的条件在切换时，框架会有一个局部渲染的过程，从而确保条件块在渲染时可以销毁，并进行重新渲染。而hidden属性始终都会渲染，通过hidden属性可以控制视图上的显示或隐藏。一般来说，wx:if有更高的切换消耗，hidden有更高的初始话渲染消耗。所以如果元素要频繁切换的话，用hidden更好。