角度材料 - md-virtual-repeat在列表 - 滚动/加载/显示问题 [英] Angular Material - md-virtual-repeat in list - scroll/loading/display issue

问题描述

在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).

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

See 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它是更糟糕但不可怕，但是，在某些屏幕尺寸更是有问题）。

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和google搜索了几个小时，但发现没有解决这个问题。任何想法？

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

推荐答案

我注意到一个类似的问题前一段遇到了 md-

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

href =https://material.angularjs.org/latest/api/directive/mdVirtualRepeat =nofollow> docs 如下：

重复元素的高度或宽度（每个元素必须相同，
）。可选的。如果缺失，将尝试从
dom读取大小，但仍假设所有重复节点具有相同的
高度或宽度。

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.

我已将此添加到您的示例

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 ，并已移除

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在列表 - 滚动/加载/显示问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！