角度材料 - 列表中的 md-virtual-repeat - 滚动/加载/显示问题

问题描述

在 md-virtual-repeat 下向下滚动列表时，滚动和显示速度不一致.项目的显示速度不够快，无法跟上滚动速度.它还会滚动越过列表"，以便在底部显示空白区域(而它应该停止滚动).

When scrolling down a list under md-virtual-repeat there is an inconsistency between scroll and display speed. Items are not being displayed fast enough to keep up with the scroll speed. It also scrolls 'past the list' so that white space is displayed at the bottom (whereas it should have stopped scrolling).

参见代码笔: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"上的 min-height 更改为偏离其默认值会加剧问题.在 codepen 上，当 min-height 没有改变时，这个问题不存在(在我的本地机器上运行 Chrome，它更糟但并不可怕.但是，在某些屏幕尺寸下问题更多).

The problem is aggravated by changing min-height on "md-list-item, md-list-item ._md-list-item-inner" away from it's default value. On codepen, the problem is non-existent when the min-height is not changed (running on my local machine with Chrome it is worse but not terrible. However, it is more problematic at certain screen sizes).

我使用 CSS 并在谷歌上搜索了几个小时，但没有发现任何可以解决问题的方法.有什么想法吗?

I played with the CSS and googled for a few hours but found nothing that solved the problem. Any ideas?

推荐答案

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

I noticed a similar problem a while ago and came across the md-item-size attribute of md-virtual-repeat.

它在docs中的描述如下:

重复元素的高度或宽度(必须相同对于每个元素).可选的.将尝试从dom 如果丢失，但仍假定所有重复节点具有相同高度或宽度.

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

I've added this to your example

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

其中48是md-list-item的高度，去掉

where 48 is the height of the md-list-item, and removed

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

CodePen

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

The scrolling appears to be smooth and without a white space at the bottom.

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

I also changed this CSS so that the scroll within the md-virtual-repeat-container works correctly

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

这篇关于角度材料 - 列表中的 md-virtual-repeat - 滚动/加载/显示问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！