微信小程序 wx:if 与 hidden区别

2022-12-13 18:35:39 浏览数 (1)

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

wx:if

hidden

true时显示

true时隐藏

隐藏不渲染

隐藏仍渲染

更高的切换消耗

更高的初始渲染消耗

频繁切换消耗更多资源

频繁切换消耗不多

销毁或重新渲染达到显示隐藏

始终渲染,只是单纯的显示隐藏

如果需要频繁切换的情景下,用hidden更好,如果在运行时条件不大可能改变则wx:if较好。 举个例子 就是小程序商城上 点击进去判断秒杀情况 或者说订单列表的状态 那些只需一次渲染判断显示的标签

很多人觉得 能做出来就行了 这些无所谓的 其实不然

从微信小程序出来到现在 我已经做过二十多个微信小程序了 大大小小的 死了的 还在不断推广都有 作为前端开发者 需要去考虑用户使用环境以及情况 你无法想象用户处在什么环境使用的是什么手机 我曾经碰到一个用户投诉说 打不开小程序某页面 老是强退 我测试使用没问题 我奇怪 后面一问 用的是红米2s 这得是13年的手机的 很惊讶能坚持(yong)到现在 那个页面运算比较大 加上渲染的比较多 手机差的就卡死然后强退了 后来我花了下午把该小程序的js全部重新优化 然后就没事了 其中也发现了这个wx:if 与 hidden在页面在实际情况上的区别

0 人点赞