微信小程序中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 隐藏不占据空间。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
-
本文向大家介绍微信小程序tabbar不显示解决办法，包括了微信小程序tabbar不显示解决办法的使用技巧和注意事项，需要的朋友参考一下 微信小程序tabbar不显示解决办法 微信小程序在测试tabbar的时候怎么都不显示。 我就不贴api了。直接上代码 这个json看了一天，直觉告诉我没什么问题。实际上也没什么问题。 但是坑爹的一幕来了，tabbar怎么都不显示。最后发现是 看标红的问题。第一行绝
-
本文向大家介绍uniapp微信小程序:key失效的解决方法，包括了uniapp微信小程序:key失效的解决方法的使用技巧和注意事项，需要的朋友参考一下 uniapp 代码 编译到 微信小程序 貌似不支持 :key="item[urlKey]" 这种语法 解决方案： 使用computed就可以解决了 到此这篇关于uniapp微信小程序:key失效的解决方法的文章就介绍到这了,更多相关uniapp小程
-
本文向大家介绍微信小程序 slot踩坑的解决，包括了微信小程序 slot踩坑的解决的使用技巧和注意事项，需要的朋友参考一下 今天在使用微信小程序 component 里的 slot 时发现，当只用一个 slot 并且将 slot 命名后，页面中调用这个 slot 并不会加载进来。 研究尝试后发现，如果想要使用命名的方式调用单个 slot ，也需要像调用多个 slot 的方式 在 component
-
我想 item.shop_price.split('.')[0] 直接把这个JS方法写在页面中， 如何去写呢？
-
本文向大家介绍微信小程序的动画效果详解，包括了微信小程序的动画效果详解的使用技巧和注意事项，需要的朋友参考一下 前言 由于公司计划有变，所以从H5页面改成去小程序写。所以在着手开发小程序。本人也不是什么前端高手，只是一名写后端偶尔写写前端的渣渣。请前端大神们勿喷。 一、什么是微信小程序？ 小程序在我的理解中只是高度封装的H5，封装了各种组件。根据官方的说法小程序运行不是在浏览器当中。姑且算是微
-
本文向大家介绍微信小程序new Date()方法失效问题解决方法，包括了微信小程序new Date()方法失效问题解决方法的使用技巧和注意事项，需要的朋友参考一下 iOS系统对js中的new Date()方法有格式要求 正确写法应该是 而实际应该过程中日期格式大部分都是2019-07-24这种，所以在实际应用过程中需要用正则对字符串进行预处理 在小程序开发过程中用到一个日期转换方法，然而苹果手机就