微信小程序中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 相关文章推荐
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
javascript针对DOM的应用实例(一)
Apr 15 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
js的对象与函数详解
Jan 21 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 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
短波问题解答
2021/02/28 无线电
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
Python微信库:itchat的用法详解
2017/08/14 Python
python字典改变value值方法总结
2019/06/21 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
KIKO比利时官网:意大利彩妆品牌
2017/07/23 全球购物
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
应届生新闻编辑求职信
2013/11/19 职场文书
行政人员岗位职责
2013/12/08 职场文书
大型车展策划方案
2014/02/01 职场文书
经典公益广告词
2014/03/13 职场文书
担保书格式及范文
2014/04/01 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
Python机器学习之决策树和随机森林
2021/07/15 Javascript