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


Posted in Javascript onApril 26, 2017

微信小程序中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 获取iframe里页面中元素值的方法
Feb 17 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
JavaScript代码执行的先后顺序问题
Oct 29 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
JavaScript实现猜数字游戏
May 20 Javascript
openlayers实现图标拖动获取坐标
Sep 25 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 Javascript
微信小程序 flex实现导航实例详解
Apr 26 #Javascript
微信扫码支付零云插件版实例详解
Apr 26 #Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 #Javascript
微信小程序 实例开发总结
Apr 26 #Javascript
AngularJS 霸道的过滤器小结
Apr 26 #Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 #Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 #Javascript
You might like
php根据分类合并数组的方法实例详解
2013/11/06 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
python转换摩斯密码示例
2014/02/16 Python
python实现网站的模拟登录
2016/01/04 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
使用matplotlib画散点图的方法
2018/05/25 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
医药工作岗位求职信分享
2013/12/31 职场文书
自我评价如何写好?
2014/01/05 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
八一建军节慰问信
2015/02/14 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
中学政教处工作总结
2015/08/13 职场文书
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技