Angular Material - 列表中的md-virtual-repeat - 滚动/加载/显示问题

时间:2016-07-07 19:14:55

标签: javascript css angularjs angular-material

在md-virtual-repeat下向下滚动列表时,滚动和显示速度之间存在不一致。项目的显示速度不足以跟上滚动速度。它还会滚动到列表之后#39;以便在底部显示空白区域(而它应该停止滚动)。

请参阅codepen:http://codepen.io/sweatherly/pen/PzKRLz

md-list-item, md-list-item ._md-list-item-inner {
  min-height: 32px;
}

通过更改" md-list-item,md-list-item ._md-list-item-inner"的最小高度会加剧问题。远离它的默认值。在codepen上,当最小高度没有改变时,问题就不存在了(在我的本地机器上使用Chrome运行它更糟糕但不是很糟糕。但是,在某些屏幕尺寸下它会更成问题。)

我玩了CSS并用Google搜索了几个小时,但没有找到解决问题的方法。有什么想法吗?

1 个答案:

答案 0 :(得分:3)

前一段时间我发现了一个类似的问题,并且遇到了md-item-size的{​​{1}}属性。

docs中的描述如下:

  

重复元素的高度或宽度(必须相同   对于每个元素)。可选的。将尝试从中读取大小   dom如果遗漏,但仍然假设所有重复的节点都相同   高度或宽度。

我已将此添加到您的示例中

md-virtual-repeat

其中48是<md-list-item md-virtual-repeat="test in testings" class="repeated-item" flex="" md-item-size="48"> 的高度,已删除

md-list-item

CodePen

滚动显得平滑,底部没有空白区域。

我还更改了此CSS,以便md-list-item, md-list-item ._md-list-item-inner { min-height: 32px; } 内的滚动正常工作

md-virtual-repeat-container