微信小程序：hidden不生效原因及解决方法_Gao++的博客

微信小程序：hidden不生效原因及解决方法_Gao++的博客-CSDN博客

<view class='mobile'>
<text>手机：</text>
<view>
<input type='number' maxlength='11' bindinput='inputtel' value="{{tel}}" bindblur='blurtel' bindfocus='focustel'></input>
<i class="fa fa-close" catchtap="cleartel" hidden="true" style="display:flex;"></i>
</view>
</view>

 

你会发现hidden没生效。经我实验发现hidden元素对块状布局才生效，所以这段代码里导致hidden没生效的罪魁祸首是display:flex。把这个去掉就可以了。

如果非要同时使用隐藏和flex的话，可以这样解决：使用wx:if代替hidden