因为公司项目的需求,最近在做微信小程序。公司项目是一个购物类的APP,在调试项目的时候遇到一个奇怪的问题:在商品的分类列表中,如果库存为0的商品,商品是有一个"已售罄"的logo的。点击商品列表页进入商品详情页,在商品详情页也会有一个"已售罄"的logo。
然而如果在商品列表页执行频繁点击列表条目操作,频繁进入商品详情页,这时发现商品详情页的"已售罄"logo时而时而没有。打开小程序的调试按钮,可以查看图片的url并不为空。
查看代码,后来把“已售罄”logo 显示隐藏的判断条件换成 hidden 才算解决问题!
查看官方文档,
wx:ifvshidden
因为wx:if之中的模板也可能包含数据绑定,所有当wx:if的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。
同时wx:if也是惰性的,如果在初始渲染条件为false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。
相比之下,hidden就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。
一般来说,wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用hidden更好,如果在运行时条件不大可能改变则wx:if较好。