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

发布时间 - 2026-01-11 00:51:11    点击率:

微信小程序中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 隐藏不占据空间。

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


# 微信小程序中hidden不生效  # 小程序  # hidden  # 微信小程序 免费SSL证书https、TLS版本问题的解决办法  # 微信小程序 wx.uploadFile无法上传解决办法  # 微信小程序 出现47001 data format error原因解决办法  # 微信小程序 解决请求服务器手机预览请求不到数据的方法  # 微信小程序 setData使用方法及常用错误解决办法  # 微信小程序 合法域名校验出错详解及解决办法  # 微信小程序 常见问题总结(4058  # 40013)及解决办法  # 微信小程序 TLS 版本必须大于等于1.2问题解决  # 微信小程序遇到修改数据后页面不渲染的问题解决  # 微信小程序排坑指南详解  # 是一个  # 是在  # 也能  # 可以用  # 这段  # 希望能  # 要用  # 谢谢大家  # 想用  # 解决办法  # 你会发现  # 就可以  # strong  # view  # style  # display  # flex  # true  # brush  # class 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: linux top下的 minerd 木马清除方法  如何解决hover在ie6中的兼容性问题  Laravel如何与Pusher实现实时通信?(WebSocket示例)  零基础网站服务器架设实战:轻量应用与域名解析配置指南  北京企业网站设计制作公司,北京铁路集团官方网站?  Laravel如何实现全文搜索功能?(Scout和Algolia示例)  桂林网站制作公司有哪些,桂林马拉松怎么报名?  Laravel如何使用Gate和Policy进行授权?(权限控制)  什么是javascript作用域_全局和局部作用域有什么区别?  使用Dockerfile构建java web环境  如何用y主机助手快速搭建网站?  HTML5空格和margin有啥区别_空格与外边距的使用场景【说明】  Laravel如何实现多表关联模型定义_Laravel多对多关系及中间表数据存取【方法】  Laravel如何使用Laravel Vite编译前端_Laravel10以上版本前端静态资源管理【教程】  公司网站制作价格怎么算,公司办个官网需要多少钱?  Laravel如何实现URL美化Slug功能_Laravel使用eloquent-sluggable生成别名【方法】  Laravel Asset编译怎么配置_Laravel Vite前端构建工具使用  Laravel集合Collection怎么用_Laravel集合常用函数详解  如何用VPS主机快速搭建个人网站?  如何在Windows 2008云服务器安全搭建网站?  如何快速搭建自助建站会员专属系统?  Laravel如何处理JSON字段的查询和更新_Laravel JSON列操作与查询技巧  如何在万网主机上快速搭建网站?  Laravel如何使用Blade模板引擎?(完整语法和示例)  佛山企业网站制作公司有哪些,沟通100网上服务官网?  如何在腾讯云免费申请建站?  利用 Google AI 进行 YouTube 视频 SEO 描述优化  html5如何设置样式_HTML5样式设置方法与CSS应用技巧【教程】  Laravel中间件如何使用_Laravel自定义中间件实现权限控制  Laravel怎么实现软删除SoftDeletes_Laravel模型回收站功能与数据恢复【步骤】  夸克浏览器网页跳转延迟怎么办 夸克浏览器跳转优化  Windows驱动无法加载错误解决方法_驱动签名验证失败处理步骤  Android中Textview和图片同行显示(文字超出用省略号,图片自动靠右边)  html文件怎么打开证书错误_https协议的html打开提示不安全【指南】  🚀拖拽式CMS建站能否实现高效与个性化并存?  香港服务器租用费用高吗?如何避免常见误区?  百度浏览器如何管理插件 百度浏览器插件管理方法  Android自定义listview布局实现上拉加载下拉刷新功能  如何为不同团队 ID 动态生成多个“认领值班”按钮  EditPlus中的正则表达式实战(6)  微信推文制作网站有哪些,怎么做微信推文,急?  制作公司内部网站有哪些,内网如何建网站?  Laravel怎么实现微信登录_Laravel Socialite第三方登录集成  HTML透明颜色代码在Angular里怎么设置_Angular透明颜色使用指南【详解】  详解一款开源免费的.NET文档操作组件DocX(.NET组件介绍之一)  如何快速搭建个人网站并优化SEO?  高防服务器租用首荐平台,企业级优惠套餐快速部署  Midjourney怎么调整光影效果_Midjourney光影调整方法【指南】  Android使用GridView实现日历的简单功能  如何快速登录WAP自助建站平台?