翻看之前的印象笔记,看到了之前的遗留问题,总结在此,便于查看。
先说结论:
hidden不生效和display为flex有关,可以利用动态属性设置display属性。
微信官方文档里有提到说hidden是所有组件都有的属性,但事实及编码中发现并不是这样的,有条件限制。
小程序中有代码为:
1 2 3 4 |
<view hidden="true" style="display:flex;flex-direction: row;"> <text>text1</text> <text>text2</text> </view> |
会发现hidden没生效,经过我的实验发现这段代码中hidden元素对flex布局不生效,对块布局才生效,所以这段代码李导致hidden没生效的原因是display:flex.
但是这个布局一定要用到flex布局怎么办?
其实这里想用hidden无非就是想控制布局的显示,display:none也可以做到影藏显示,这里有个取巧的方式,动态设置display属性。(三元运算符)
1 2 3 4 |
<view hidden="true" style="display:{{hideview ? none : flex}};flex-direction: row;"> <text>text1</text> <text>text2</text> </view> |
这里的hidden是在对应的js里是一个变量,有js来动态控制。
注意:hidden隐藏布局,但是会占空间,display:none 隐藏但是不占空间