javascript - Angular Material - md-virtual-repeat in list - 滚动/加载/显示问题

Question

在 md-virtual-repeat 下向下滚动列表时，滚动速度和显示速度不一致。元素显示速度不够快，跟不上滚动速度。它还滚动“越过列表”，以便在底部显示空白(而它应该停止滚动)。

参见代码笔: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 并在谷歌上搜索了几个小时，但没有找到解决问题的方法。有什么想法吗？

Answer 1

前段时间我注意到了一个类似的问题，遇到了 md-virtual-repeat 的 md-item-size 属性。

它在 docs 中的描述如下:

The height or width of the repeated elements (which must be identical for each element). Optional. Will attempt to read the size from the dom if missing, but still assumes that all repeated nodes have same height or width.

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

<md-list-item md-virtual-repeat="test in testings" class="repeated-item" flex="" md-item-size="48">

其中 48 是 md-list-item 的高度，已移除

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

CodePen

滚动看起来很流畅，底部没有空白。

我还更改了此 CSS，以便 md-virtual-repeat-container 中的滚动正常工作

.md-virtual-repeat-container.md-orient-vertical {
    height: calc(100% - 100px);
}