【微信小程序】 wx if 与 hidden 隐藏元素 区别

首先给大家推荐一下我老师大神的人工智能教学网站。教学不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵黄段子!点这里可以跳转到网站

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
    })
  },

点这里可以跳转到人工智能网站

0 0 投票数
文章评分
订阅评论
提醒
0 评论
内联反馈
查看所有评论
0
希望看到您的想法,请发表评论。x
()
x