2016-07-07 86 views
4

在md-virtual-repeat下滾動列表時,滾動和顯示速度之間存在不一致。項目顯示速度不夠快,無法跟上滾動速度。它也滾動'過去的列表',以便空白顯示在底部(而它應該停止滾動)。角度材質 - 列表中的md-virtual-repeat - 滾動/加載/顯示問題

見codepen:http://codepen.io/sweatherly/pen/PzKRLz

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

問題是由不斷變化的最小高度加重 「MD-列表項,MD-列表項._md列表項-內」 遠離它的默認值。在codepen上,當min-height沒有改變時,問題是不存在的(在我的本地機器上運行,Chrome會更糟糕,但並不可怕,但是在某些屏幕尺寸下它更成問題)。

我玩CSS和谷歌搜索幾個小時,但沒有發現任何解決問題。有任何想法嗎?

回答

2

前段時間我發現了一個類似的問題,並且遇到了md-virtual-repeatmd-item-size屬性。在docs

其描述如下:

重複元件(其必須爲每個元件相同 )的高度或寬度。可選的。如果丟失,將嘗試從 dom讀取大小,但仍假定所有重複的節點具有相同的高度或寬度 。

我已經添加到您的示例

<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); 
} 
+0

謝謝!現在精美的作品。 – sweatherly

+0

100px在哪裏? .md-virtual-repeat-container.md-orient-vertical {height:calc(100% - 100px); } – sweatherly

+0

@sweatherly說實話,這是工作的價值。我在你的CodePen中注意到滾動條消失了,檢查了容器,我看到它的底部正在通過列表。 –