微信小程序–hidden不生效原因及解决方案

翻看之前的印象笔记,看到了之前的遗留问题,总结在此,便于查看。

先说结论:

hidden不生效和display为flex有关,可以利用动态属性设置display属性。

微信官方文档里有提到说hidden是所有组件都有的属性,但事实及编码中发现并不是这样的,有条件限制。

小程序中有代码为:

会发现hidden没生效,经过我的实验发现这段代码中hidden元素对flex布局不生效,对块布局才生效,所以这段代码李导致hidden没生效的原因是display:flex.

但是这个布局一定要用到flex布局怎么办?

其实这里想用hidden无非就是想控制布局的显示,display:none也可以做到影藏显示,这里有个取巧的方式,动态设置display属性。(三元运算符)

这里的hidden是在对应的js里是一个变量,有js来动态控制。

注意:hidden隐藏布局,但是会占空间,display:none 隐藏但是不占空间

关于作者

tu