微信小程序中hidden不生效原因的解决办法

更新时间：2017年04月26日 15:50:30 作者：Sunny玄子

这篇文章主要介绍了微信小程序中hidden不生效原因的解决办法的相关资料,需要的朋友可以参考下

微信小程序中hidden不生效原因的解决办法

例如如下布局：

  <view hidden="true" style="display:flex;flex-direction: row;">
    <text>text1</text>
    <text>text2</text>
  </view>

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

如果一定要用flex布局怎么办？

其实这里想用hidden无非就是想影藏这个布局，display:none也能做到隐藏。这里可以用一个取巧的方法，动态设置display属性，示例如下：

  <view hidden="true" style="display:{{hideview ? none : flex}};flex-direction: row;">
    <text>text1</text>
    <text>text2</text>
  </view>

这里的hideview是在对应的js里是一个变量，由js来动态控制。

后话

hidden 隐藏布局，虽然隐藏了，但是还是会占空间。

display:none 隐藏不占据空间。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

您可能感兴趣的文章:

JavaScript数组详细归纳
JavaScript 数组用于在单一变量中存储多个值，数组是一种特殊的变量，它能够一次存放一个以上的值。下面文章小编就来详细归纳一下JavaScript数组,需要的朋友可以参考一下
2021-09-09
一看就懂的JavaScript适配器模式图解及使用示例
这篇文章主要为大家介绍了JavaScript适配器模式图解及使用示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
JS原始类型为什么能调用方法原理详解
这篇文章主要为大家介绍了JS原始类型为什么能调用方法原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
微信小程序 <swiper-item>标签传入数据
这篇文章主要介绍了微信小程序 <swiper-item>标签传入数据的相关资料,需要的朋友可以参考下
2017-05-05
Promise静态四兄弟实现示例详解
这篇文章主要为大家介绍了Promise静态四兄弟实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
TypeScript 内置高级类型编程示例
这篇文章主要为大家介绍了TypeScript 内置高级类型编程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
微信小程序加载 app-service.js 错误解决方法
这篇文章主要介绍了微信小程序加载 app-service.js 错误详解的相关资料,在开发微信小程序过程中出现了app-services.js的错误，并解决此问题，需要的朋友可以参考下
2016-10-10
美化下拉列表
美化下拉列表...
2006-06-06
JS前端接口请求参数混淆方案分享
这篇文章主要为大家介绍了JS前端接口请求参数混淆方案分享，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
2023年了该了解下WebComponent使用教程
这篇文章主要为大家介绍了2023年了该了解下WebComponent使用教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02