转载:【微信小程序】 wx:if 与 hidden(隐藏元素)区别
2017-08-10 11:10
851 查看
条件渲染 顾名思义所谓的条件渲染,就是通过条件来判断是否需要渲染该代码块。条件渲染主要是用到wx:if 和 block wx:if 这两个,第一个相信好理解,第二个是在block里面进行条件渲染,这里我们特别说明一下< block/>并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。和我们以前的逻辑编程类似,既然有了wx:if ,那么我们也会有wx:elseif和wx.else,这几个组合起来,可以使条件渲染更加灵活。
在这里官方文档中提到了一个wx:if和hidden的对比,通过合理的运用这两种方法可以使你的程序更优。下面我们就是说说他们俩的区别:
因为wx:if之中也可能包含数据绑定,所以当wx:if的条件值切换时,框架有一个局部渲染的过程,他会确保条件在切换是销毁或者重新渲染。同时wx:if也是有惰性的,如果初始渲染条件为false,框架什么也不会做,只有在条件第一次变为真的时候才会开始渲染。相比之下hidden就简单的多,组件始终都会被渲染,只是简单的控制显示和隐藏,一般来说,wx:if 有更高的切换消耗,而hidden有更高的初始渲染消耗,你可以根据自己的需求来调用。
wx:if 与 hidden 都可以控制微信小程序中元素的显示与否。
wx:if 是遇 true 显示,hidden 是遇 false 显示。
他们还有一层细微的区别:
wx:if 在隐藏的时候不渲染,而 hidden 在隐藏时仍然渲染,只是不呈现。
所以如果频繁切换的话,用 wx:if 将会消耗更多资源,因为每次呈现的时候他都会渲染,每次隐藏的时候,他都会销毁。
如果切换并不频繁的话,用 wx:if 相对来说较好些,因为它会避免初始就一下渲染那么多。
总结
频繁切换:用 hidden。
偶尔切换:用 wx:if。
示例:下方例子 wx:if中变量为true,进行渲染,false销毁;
示例二:下方例子 hidden中变量为false,进行渲染,true进行隐藏,不销毁;(wxml)和(js)
在这里官方文档中提到了一个wx:if和hidden的对比,通过合理的运用这两种方法可以使你的程序更优。下面我们就是说说他们俩的区别:
因为wx:if之中也可能包含数据绑定,所以当wx:if的条件值切换时,框架有一个局部渲染的过程,他会确保条件在切换是销毁或者重新渲染。同时wx:if也是有惰性的,如果初始渲染条件为false,框架什么也不会做,只有在条件第一次变为真的时候才会开始渲染。相比之下hidden就简单的多,组件始终都会被渲染,只是简单的控制显示和隐藏,一般来说,wx:if 有更高的切换消耗,而hidden有更高的初始渲染消耗,你可以根据自己的需求来调用。
wx:if 与 hidden 都可以控制微信小程序中元素的显示与否。
wx:if 是遇 true 显示,hidden 是遇 false 显示。
他们还有一层细微的区别:
wx:if 在隐藏的时候不渲染,而 hidden 在隐藏时仍然渲染,只是不呈现。
所以如果频繁切换的话,用 wx:if 将会消耗更多资源,因为每次呈现的时候他都会渲染,每次隐藏的时候,他都会销毁。
如果切换并不频繁的话,用 wx:if 相对来说较好些,因为它会避免初始就一下渲染那么多。
总结
频繁切换:用 hidden。
偶尔切换:用 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)
<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>
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 }) },
相关文章推荐
- 微信小程序 wx:if 与 hidden区别
- JQuery怎么知道一个元素是否隐藏或显示How do you test if something is hidden in jQuery?
- 微信小程序之wx:if视图层的条件渲染 —— 微信小程序教程系列(10)
- 微信小程序10---条件语句if和循环语句for(三目运算+hidden)
- JQuery怎么知道一个元素是否隐藏或显示How do you test if something is hidden in jQuery?
- 微信小程序使用三元运算符代替wx:if
- 微信小程序 wx:for循环和数组内部元素的增加
- 微信小程序wx:if条件渲染
- JQuery怎么知道一个元素是否隐藏或显示How do you test if something is hidden in jQuery?
- 微信小程序---显示与隐藏hidden
- 微信小程序使用三元运算符代替wx:if
- 微信小程序 —— 动态决定页面元素显示或隐藏的技巧
- 微信小程序的wx:if
- 微信小程序(5)wx:if 条件判断
- 隐藏元素 display:none visibility: hidden区别
- 关于隐藏元素高度的问题 css visibility:hidden 与 display:none的区别
- 【微信小程序】详解wx:if elif else的用法(搭配view、block)
- 转载:css元素隐藏原理及display:none和visibility:hidden
- 微信小程序 —— 瀑布流简单写法(css3属性加wx:if判断轻松实现)
- 微信小程序之----wx:if elif else的用法(搭配view、block)