微信小程序中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 相关文章推荐
新闻内页-JS分页
Jun 07 Javascript
js tab 选项卡
Apr 26 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
jquery tab标签页的制作
May 10 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
JavaScript的继承实现小结
May 07 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
Vue常用的全选/反选的示例代码
Feb 19 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
虫族 ZERG 概述
2020/03/14 星际争霸
PHP5中MVC结构学习
2006/10/09 PHP
PHP中的extract的作用分析
2008/04/09 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
layui实现三级联动效果
2019/07/26 Javascript
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
Python实现京东抢秒杀功能
2021/01/25 Python
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
娱乐节目策划方案
2014/06/10 职场文书
农业项目建议书
2014/08/25 职场文书
教师个人师德总结
2015/02/06 职场文书
讲座新闻稿
2015/07/18 职场文书
药房管理制度范本
2015/08/06 职场文书
欧元符号 €
2022/02/17 杂记
python运行脚本文件的三种方法实例
2022/06/25 Python