wx:if 与 hidden

作者:vkvi 来源:ITPOW(原创) 日期:2017-5-4

wx:if 与 hidden 都可以控制微信小程序中元素的显示与否。

  • wx:if 是遇 true 显示。
  • hidden 是遇 false 显示。

他们还有一层细微的区别:

  • wx:if 在隐藏的时候不渲染。
  • hidden 在隐藏时仍然渲染,只是不呈现。

所以如果频繁切换的话,用 wx:if 将会消耗更多资源,因为每次呈现的时候他都会渲染,每次隐藏的时候,他都会销毁。

如果切换并不频繁的话,用 wx:if 相对来说较好些,因为它会避免初始就一下渲染那么多。

总结:

  • 频繁切换:用 hidden。
  • 偶尔切换:用 wx:if。

有时候为了应用效果,我们也不必管上面的规则,比如:

当前有一个 video 控件,autoplay="true"。

  • 如果我们用 hidden 来隐藏,然后再呈现,我们会发现:隐藏期间视频已经在播放了,呈现时反而会暂停播放。
  • 如果我们用 wx:if 来隐藏,然后再呈现,我们会发现:隐藏期间视频并没有播放,呈现时会立即播放。再隐藏,视频又停止播放。再呈现,视频又从头播放。
相关文章