wx:if 与hidden都可以控制微信小程序中的元素的显示与否。
先演示下两种方式的使用
wx:if 的使用
当isShow 是true时显示
wx:if 还可以配合wx:else 使用，用来显示隐藏不同的控件
<view class="test" wx:if="{{isShow}}"></view>
<view class="test1" wx:else></view>
当isShow true显示test 隐藏test1；当isShow false时显示test1 隐藏test
hidden的使用
<view class="test" hidden="{{isHidden}}"></view>
<view class="test1"></view>
当isHidden true时 test隐藏 isHidden false时 test显示
wx:if 和hidden的差别
wx:if的隐藏是不渲染控件
hidden的隐藏是渲染控件，但是不显示
看下面效果
image.png
在xml布局中可以看到显示了三个控件，hidden隐藏的部分依然被渲染。
在实际开发过程中，如果频繁切换的话，用wx:if因为要频繁销毁和渲染，会消耗更多的资源。
如果不是频繁切换可以考虑使用wx:if，防止页面初始化时一下渲染那么多。
网友评论