小程序中使用 wx:if="{{condition}}" 进行条件渲染，当condition为true时，携带 wx:if 这个可知属性的标签才会被渲染显示。
之前在项目中就遇到过一个问题：
页面的wxml如下：
jobDetail.wxml
但在小程序开发工具调试器窗口中：
xml调试器窗口
结合两张图渲染顺序可以看出，image是最后渲染加在页面上的，但从DOM结构来看，image应该会早于white-bgView先渲染。那么导致实际与预期出现偏差但原因是什么呢？
查看image标签，可以猜测应该wx:if控制属性影响的，为验证猜想，去掉wx:if属性后，小程序调试器xml窗口显示结构如预期：
去掉wx:if后
再回头看官方文档也有提到，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进行比较，在具体实际使用中如何选择有很大帮助。
wx:if VS hidden
网友评论