条件渲染wx:if

小程序中使用 wx:if="{{condition}}" 进行条件渲染,当conditiontrue时,携带 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是网络请求得到的,一开始进入页面,在请求完成前为空,所以这时的渲染条件为falseDOM跳过image元素渲染whit-bgView。等到页面数据请求成功后,jobInfo.banner_url有值,wx:if的条件变为true,页面会进行局部渲染显示image

Tip:官方文档也将wx:if和hidden进行比较,在具体实际使用中如何选择有很大帮助。

wx:if VS hidden

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 概述:本文主要描述微信小程序开发过程中 wx:if和wx:for的用法,顺带展示二者连用的坑; 一.基本使用: 1...
    hehtao阅读 8,640评论 0 4
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,790评论 19 139
  • 《蒙田随笔(精装珍藏版)》是16世纪法国文艺复兴后期著名的人文主义学者蒙田的代表作。它因其丰富的思想内涵而闻名干世...
    拾壹北阅读 812评论 0 0
  • 晚上,接妞妞的时候,已经六点多了,她说妈妈我好饿啊,刚才我在小饭桌看到同学曹一帆吃小鱼果,我也想吃,于是我就和他说...
    67fbaec5208f阅读 340评论 0 0
  • 2017年的最后的几天,我们在朋友圈里开始刷屏,因为我们曾经拥有的十八岁。 缘起是一个90后的告别十八岁生日一个梗...
    沐澄_阅读 321评论 0 0

友情链接更多精彩内容