使用 md-virtual-repeat 和 md-virtual-repeat-container 的可折叠组头

Posted

技术标签:

【中文标题】使用 md-virtual-repeat 和 md-virtual-repeat-container 的可折叠组头【英文标题】:Collapsible group headers using md-virtual-repeat and md-virtual-repeat-container 【发布时间】:2017-05-26 22:09:47 【问题描述】:

我正在尝试使用 md-virtual-repeat 实现显示可折叠分组作为概念证明,并且在根据内部内容设置高度时遇到问题,就像使用虚拟重复项一样。我创建了 codepen 示例来说明问题。任何基于 CSS 或 angularJs 的解决方案将不胜感激。

http://codepen.io/pyella/pen/XpXaEJ

编辑 1: 我正在尝试这个概念证明来实现无限滚动以呈现固定的 dom 元素,因为我的列表可能包含非常大的数字(要呈现 10000 个 DOM 元素),这可能会导致性能和CPU 问题和这个概念证明,任何使用 Angular 渲染大量数据的人都可以使用 Angular 材质并避免性能问题。

注意:请单击显示的年份之一以显示月份包装容器。目前高度被硬编码为 250 像素,并且 100% 的高度不显示月份包装容器。

如果月份包装高度未注释,则不会显示月份包装

.virtualRepeatdemoScrollTo #months-wrapper 
 /* height: 100%;*/
  /*position: initial;*/


.virtualRepeatdemoScrollTo .md-virtual-repeat-container 
  height: 250px;

【问题讨论】:

【参考方案1】:

我不确定这是否是您想要实现的,但这里是编辑过的 codepen:http://codepen.io/anon/pen/zNBrJg

我加了

.md-virtual-repeat-scroller
  position: initial !important;

它之前的positionabsolute,这就是它的父级没有调整高度的原因。

我还从.virtualRepeatdemoScrollTo #vertical-container 选择器中删除了height: 100% 规则。

【讨论】:

感谢 patryKlucka 的回复,过去二十年来,我一直在尝试通过分组来实现可折叠的标题,并且每个分组都有一组要显示的月份。我试图证明这个概念,因为虚拟重复只会呈现固定的 DOM 元素(因为我的列表很大,它会导致性能问题)。在您编辑的代码笔中,我们不会看到超过 5 年。我已经更新了我的 codepen 示例,该示例显示了所有年份,但现在单击年份标题不显示下面的月份。想要从我的 codpen 示例中实现可折叠的分组标题。

以上是关于使用 md-virtual-repeat 和 md-virtual-repeat-container 的可折叠组头的主要内容,如果未能解决你的问题,请参考以下文章

.md5文件怎么用的

使用 SHA-512 和 salt 来散列 MD5 散列密码?

md5 加密算法和升级

md-option 元素在悬停和选择时更改外观和行为

.net中md5具体怎么使用加密和解密?

如何在角度 2 的网格中使用 flex 布局和 md-card?