小程序之 wx:if 和 hidden 简介

小程序之 wx:if 和 hidden 简介

1. 在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块，但 wx:if 是惰性的，如果在初始条件下是false，则框架什么也不会做，只有当条件切换成 true 时，才会渲染布局。相比之下 hidden 就简单多了，框架会在开始加载的时候直接渲染，而 hidden 属性切换时只会操作显示或隐藏，不会再重新渲染，所以 hidden 有更低的切换消耗，而 wx:if 有更低的初始渲染消耗；

<view wx:if="{{isShow}}">点击登录</view>  //初始isShow为false 此布局不会渲染

<view hidden="{{loginHidden}}">点击登录</view>  //初始loginHidden为true 此布局也会渲染，只是布局被隐藏，但是还会占空间

2. 两个属性都是控制布局显示与否的，但是在控制时需要注意，hidden 对块状布局才会生效，对于设置 display:flex 属性的控件设置 hidden = 'true' 时不会生效，需要注意应该去掉此 display:flex 属性或者在此布局上新加一个父布局 view ，对父布局设置 hidden 属性可以隐藏父布局及其里边的所有子布局 。

如果非要使用 display:flex 怎么办呢？

可以使用 display:none 直接隐藏，并且此布局不会占据空间，如果是 hidden 隐藏会占据空间，也可以用一个取巧的方法动态设置,但是我觉得有点多此一举了。

<view hidden="true" style="display:{{hideview ? none : flex}};flex-direction: row;">
        <text>text1</text>
        <text>text2</text>
    </view>