小程序中使用 wx:if="{{condition}}" 进行条件渲染,当condition为true时,携带 wx:if 这个可知属性的标签才会被渲染显示。
之前在项目中就遇到过一个问题:
页面的wxml如下:
但在小程序开发工具调试器窗口中:
结合两张图渲染顺序可以看出,image是最后渲染加在页面上的,但从DOM结构来看,image应该会早于white-bgView先渲染。那么导致实际与预期出现偏差但原因是什么呢?
查看image标签,可以猜测应该wx:if控制属性影响的,为验证猜想,去掉wx:if属性后,小程序调试器xml窗口显示结构如预期:
再回头看官方文档也有提到,wx:if是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。
这也可以很好的解释为何增加了wx:if后的image被加在DOM树底部,jobDetail页面的jobInfo.banner_url是网络请求得到的,一开始进入页面,在请求完成前为空,所以这时的渲染条件为false,DOM跳过image元素渲染whit-bgView。等到页面数据请求成功后,jobInfo.banner_url有值,wx:if的条件变为true,页面会进行局部渲染显示image。
Tip:官方文档也将wx:if和hidden进行比较,在具体实际使用中如何选择有很大帮助。