热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序关于组件的hidden属性的使用建议

先看一个作者的实验微信官方文档里有提到,hidden是所有组件都有的属性,在实际编码中发现,它的表现与描述不能完全想符。
1,先看一个作者的实验

微信官方文档里有提到,hidden是所有组件都有的属性,在实际编码中发现,它的表现与描述不能完全想符。

例如如下布局:

你会发现hidden没生效。

经实验发现hidden元素对块状布局才生效,所以这段代码里导致hidden没生效的罪魁祸首是display:flex,把这个去掉就可以了。

为了验证作者说的话,我翻了css文档,一一实践了所有display样式可能的值:

值 描述

none 此元素不会被显示。

block 此元素将显示为块级元素,此元素前后会带有换行符。

inline 默认。此元素会被显示为内联元素,元素前后没有换行符。

inline-block 行内块元素。(CSS2.1 新增的值)

list-item 此元素会作为列表显示。

run-in 此元素会根据上下文作为块级元素或内联元素显示。

compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。

marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。

table 此元素会作为块级表格来显示(类似 ),表格前后带有换行符。

inline-table 此元素会作为内联表格来显示(类似 ),表格前后没有换行符。

table-row-group 此元素会作为一个或多个行的分组来显示(类似 )。

table-header-group 此元素会作为一个或多个行的分组来显示(类似 )。

table-footer-group 此元素会作为一个或多个行的分组来显示(类似 )。

table-row 此元素会作为一个表格行显示(类似 )。

table-column-group 此元素会作为一个或多个列的分组来显示(类似 )。

table-column 此元素会作为一个单元格列显示(类似 )

table-cell 此元素会作为一个表格单元格显示(类似 和 )

table-caption 此元素会作为一个表格标题显示(类似 )

inherit 规定应该从父元素继承 display 属性的值。

改成任何一个值,除了none,还有被废弃的compact、marker,都不能奏效。

那么,WHY?

我们还是先继续阅读原文吧~

2,使用display:none控制显隐

如果一定要用flex布局怎么办?

其实这里想用hidden无非就是想隐藏这个布局,display:none也能做到隐藏。这里可以用一个取巧的方法,动态设置display属性,示例如下:

这里的hideview是在对应的js里是一个变量,由js来动态控制。

后话:hidden 隐藏布局,虽然隐藏了,但是还是会占空间,display:none 隐藏不占据空间。

3,关于wx:if与hidden的区别

最后这一句话,应该怎么理解?是不占界面空间吗?

不是!

作者想表达的意思,推测应该是:hidden虽然隐藏了视图组件,但组件仍然会渲染;display:none与hidden=true的效果是一样的,display:none仍然会渲染组件。

如果想不渲染不需要的组件,要使用条件渲染:wx:if

wx:if vs hidden

因为 wx:if 之中的模板也可能包含数据绑定,所有当 wx:if 的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。(转自微信文档)

4,关于上面那个WHY的解答

回到上面的红色语句的问题,不能说问题由display:flex引起的,而是由程序员自己造成的。

看一下view style的渲染:

小程序是先渲染组件name样式(即view),再渲染style属性样式。(未在ios与android手机上亲测)

所以就很好理解了,不是微信小程序的hidden不生效,而是小程序的hidden属性,是通过在name style上加一个display:none实现的,见上方红色箭头处。

而后,程序员又在style属性里设置了一个display:block,直接将小程序的设置override掉了。所以,它怎么可能生效呢?这不怪程序员自己吗?

那么,为什么使用废掉的compact、marker就好用了呢?

因为它们两个完全在小程序中是不存在的。设置它们等于没有设置。

5,关于hidden属性的值,不设也罢,设也无用

另外,有一点,关于hidden属性的值,像上面的代码:

hidden="true"

其实设置成hidden="false",或“0”,或者其它任何值,都是等效的,结果都是true。

不单hidden属性如此,在小程序组件中,所有布尔值属性都是这样的特征。完成可以这样用:

只要写了这个hidden属性就可以了。

6,建议不要使用hidden属性,它是一个无用的脑残属性

所以,大家都看到了:

1,使用display:none可以达到与hidden同样的效果

2,hidden的值无论怎么设置结果都是true,连动态绑定都没得做,只能使用wx:if进行条件渲染

3,话说回来,如果都要使用惰性的wx:if条件渲染了,我还用hidden干莫?

wx:if渲染是惰性渲染,只在需要的时候渲染,缺点是反复摧毁与重建,费电!(浪费手机CPU,真的是费电)

而display:none,只是切换显示,已经渲染的东西还在那里。

总结,如果不是长列表渲染,推荐使用display:none控制显隐,如果是长列表渲染,使用条件渲染。

hidden完全是一个脑残属性,没有用途。只会让程序员产生迷惑。

以上就是微信小程序关于组件的hidden属性的使用建议的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • 本文深入探讨了ASP.NET中ViewState、Cookie和Session三种状态管理技术的区别与应用场景。ViewState主要用于保存页面控件的状态信息,确保在多次往返服务器过程中数据的一致性;Cookie则存储在客户端,适用于保存少量用户偏好设置等非敏感信息;而Session则在服务器端存储数据,适合处理需要跨页面保持的数据。文章详细分析了这三种技术的工作原理及其优缺点,并提供了实际应用中的最佳实践建议。 ... [详细]
  • 高效批量文件重命名软件
    开发了一款基于Python的高效批量文件重命名软件,并集成了wxWidgets图形用户界面,使用cxfreeze将其打包为独立的可执行文件(exe)。该工具适用于需要频繁处理大量文件的用户,能够显著提高文件管理效率。详细使用说明包含在软件压缩包内。开发环境为Python 2.7和wxWidgets 3.0,运行环境要求兼容Windows系统。 ... [详细]
  • 前端技术实现调用摄像头进行拍照功能
    在公司项目中,为了实现调用摄像头进行拍照的功能,我们深入研究了HTML5的相关技术。尽管Java在许多方面表现出色,但在这一场景下,HTML5的灵活性和易用性更胜一筹。本文将分享具体的代码设计和实现细节,帮助开发者快速掌握这一功能。 ... [详细]
  • 如何在IDEA中安装和配置反编译插件以提高代码审查效率
    在 IntelliJ IDEA 中提升代码审查效率的一种方法是安装和配置反编译插件。首先,进入 IDEA 的设置界面,然后导航到插件管理部分。接下来,搜索 "ideaJad" 插件并进行安装。安装完成后,重启 IDEA 以确保插件生效。这将帮助你在审查二进制文件时更加高效地查看源代码。 ... [详细]
  • 尽管许多人认为跑步是一项简单的运动,但实际上它涉及诸多专业知识。不正确的跑步方式不仅会降低锻炼效果,还可能引发伤害。例如,穿着不合脚或过于陈旧的跑鞋,会导致足部支撑不足,增加受伤风险。此外,跑步姿势不当、热身不足、过度训练等问题也同样值得关注。本文将详细介绍七大常见跑步误区,并提供专业的改进建议,帮助跑者避免这些问题,提高运动效率和安全性。 ... [详细]
  • 本文深入探讨了 iOS 开发中 `int`、`NSInteger`、`NSUInteger` 和 `NSNumber` 的应用与区别。首先,我们将详细介绍 `NSNumber` 类型,该类用于封装基本数据类型,如整数、浮点数等,使其能够在 Objective-C 的集合类中使用。通过分析这些类型的特性和应用场景,帮助开发者更好地理解和选择合适的数据类型,提高代码的健壮性和可维护性。苹果官方文档提供了更多详细信息,可供进一步参考。 ... [详细]
  • 在执行 Vim/VM 命令时遇到错误提示:检测到名为
    在使用 Docker 时,通过 Vim 编辑 Dockerfile 文件时遇到了错误提示:“检测到名为 .dockerfile.swp 的交换文件”。这一问题通常是因为上次编辑该文件时意外中断,导致系统生成了临时的交换文件。为了解决这个问题,可以手动删除该交换文件或使用 Vim 的恢复功能来恢复未保存的更改。 ... [详细]
  • Git基础操作指南:掌握必备技能
    掌握 Git 基础操作是每个开发者必备的技能。本文详细介绍了 Git 的基本命令和使用方法,包括初始化仓库、配置用户信息、添加文件、提交更改以及查看版本历史等关键步骤。通过这些操作,读者可以快速上手并高效管理代码版本。例如,使用 `git config --global user.name` 和 `git config --global user.email` 来设置全局用户名和邮箱,确保每次提交时都能正确标识提交者信息。 ... [详细]
  • 在ASP.NET MVC项目中,通过实战解决了Ajax请求500错误及多表数据查询的问题。具体而言,将页面分为两个部分,用户点击右侧导航栏时,通过Ajax请求动态加载数据,并在右侧显示相应的页面内容。最初尝试使用Partial Action方法,但遇到了500错误。通过详细排查和调试,最终成功解决了这一问题,并实现了预期功能。此外,还优化了多表数据查询的性能,确保系统的高效运行。 ... [详细]
  • 通过自定义 `TextView`,实现了在用户点击或焦点变化时动态调整字体颜色的效果。该方法利用了 `ColorStateList` 和 `Selector` 资源文件,确保了界面交互的流畅性和视觉效果的提升。具体实现中,通过重写 `onTouchEvent` 和 `onFocusChanged` 方法,精确控制了颜色变化的时机和状态。此外,还对性能进行了优化,确保在高频率操作下依然保持高效响应。 ... [详细]
  • 在第六章中,我们将深入探讨MySQL中的多表查询技术,包括联结查询和子查询。联结查询通过将两个或多个表进行连接,基于连接条件生成结果集。常见的联结类型有内联结、外联结和全外联结。交叉联结(CROSS JOIN)虽然使用较少,但其原理是生成所有可能的组合,类似于笛卡尔积的概念。此外,子查询则是在一个查询语句中嵌套另一个查询,用于获取更复杂的数据集。本章将通过实例详细讲解这些查询方法的应用和优化技巧。 ... [详细]
  • 解决基于XML配置的MyBatis在Spring整合中出现“无效绑定语句(未找到):com.music.dao.MusicDao.findAll”问题的方法
    在将Spring与MyBatis进行整合时,作者遇到了“无效绑定语句(未找到):com.music.dao.MusicDao.findAll”的问题。该问题主要出现在使用XML文件配置DAO层的情况下,而注解方式配置则未出现类似问题。作者详细分析了两个配置文件之间的差异,并最终找到了解决方案。本文将详细介绍问题的原因及解决方法,帮助读者避免类似问题的发生。 ... [详细]
  • 在 HihoCoder 1505 中,题目要求从给定的 n 个数中选取两对数,使这两对数的和相等。如果直接对所有可能的组合进行遍历,时间复杂度将达到 O(n^4),因此需要考虑优化选择过程。通过使用哈希表或其他高效的数据结构,可以显著降低时间复杂度,从而提高算法的效率。具体实现中,可以通过预处理和存储中间结果来减少重复计算,进一步提升性能。 ... [详细]
  • 在探讨如何高效处理大规模数据报表的分页展示之前,首先需要明确导致报表加载缓慢的主要原因。通常情况下,这主要是由于两个方面:一是查询条件过于宽泛,使得数据库返回的结果集包含数百万甚至更多的记录;二是前端渲染性能不足,无法高效处理大量数据。为了优化这一过程,可以从以下几个方面入手:优化查询条件,减少不必要的数据返回;采用分页查询技术,每次仅加载所需的数据;利用缓存机制,减少对数据库的频繁访问;提升前端渲染效率,使用虚拟滚动等技术提高用户体验。 ... [详细]
  • 新年伊始,正是学习的最佳时机。本文全面解析了CK1957-Zookeeper的核心概念与实践技巧,旨在帮助初学者快速掌握这一深度学习工具。通过详细的理论讲解和实际操作示例,读者可以更好地理解Zookeeper的工作原理及其在分布式系统中的应用。无论是新手还是有一定基础的学习者,都能从中受益匪浅。 ... [详细]
author-avatar
牧羊人2602903895
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有