微信小程序中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 相关文章推荐
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
javascript实现加载xml文件的方法
Nov 24 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 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
生成缩略图
2006/10/09 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
PHP错误处理函数
2016/04/03 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
python获取list下标及其值的简单方法
2016/09/12 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
python写日志文件操作类与应用示例
2019/07/01 Python
python开头的coding设置方法
2019/08/08 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
String是最基本的数据类型吗?
2013/06/13 面试题
学校介绍信范文
2014/01/14 职场文书
拖鞋店创业计划书
2014/01/15 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
小学国庆节活动总结
2015/03/23 职场文书
小兵张嘎观后感
2015/06/03 职场文书
学生会干部任命书
2015/09/21 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书