wx:if 与 hidden 都可以控制微信小程序中元素的显示与否。

 

区别：

wx:if 是遇 true 显示，hidden 是遇 false 显示。

wx:if 在隐藏的时候不渲染，而 hidden 在隐藏时仍然渲染，只是不呈现。

所以如果频繁切换的话，用 wx:if 将会消耗更多资源，因为每次呈现的时候他都会渲染，每次隐藏的时候，他都会销毁。

如果切换并不频繁的话，用 wx:if 相对来说较好些，因为它会避免初始就一下渲染那么多。

 

示例：下方例子 wx:if中变量为true，进行渲染，false销毁；

<!--回到顶部 -->

 

<view class="com-widget-goTop" bindtap="goTop" wx:if="{{floorstatus}}">

<view class="icon-gotop">顶部</view>

</view>

示例二：下方例子 hidden中变量为false，进行渲染，true进行隐藏，不销毁；（wxml）和（js）

WXML 部分：

 

<a class="reply" bindtap="reply" data-cid="{{comment.c_id}}">回复</a>
<!-- 点击回复，展示以下回复form -->
<view wx:if="{{comment.c_id==reply_id}}" hidden="{{reply}}" class="reply_box">
<form bindsubmit="commentForm" report-submit >
<textarea name="evaContent" maxlength="50" value="回复 {{comment.username}}:" class="textarea" />
<input hidden="true" name="comment_pid" value="{{comment.c_id}}" />
<input hidden="true" name="comment_user" value="回复 {{comment.username}}:" />
<button class="save_btn" form-type="submit">发送</button>
</form>
</view>
js部分：

 

reply: function (e) {
var that = this;
// 回复form隐藏、展示切换
if (that.data.reply == true) {
that.setData({
reply: false //展示回复框
})
} else {
that.setData({
reply: true //隐藏回复框
})
}
that.setData({
reply_id: e.currentTarget.dataset.cid //用户点击回复的评论id
})
},
————————————————
版权声明：本文为CSDN博主「weixin_189」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_41883384/java/article/details/81117420