我正在嘗試在我的圖片庫中實作虛擬滾動。我的問題是實作無法正常作業。首先，元素以垂直位置顯示，實際上它們應該尊重水平斷點，然后才尊重垂直滾動。其次，隨著滾動元素的出現，間距很大。
有誰知道我該如何解決這個問題？謝謝
正確，但沒有實作滾動:(
uj5u.com熱心網友回復：
我在這里更新了你的例子。
你的問題主要是css，似乎（至少）有2個問題：
你正在
.mdc-image-list__item上課min-height: 400px和max-height: 400px。這基本上意味著你所有的.mdc-image-list__item容器都有 400px 的高度（所以 height: auto 有點沒用）。洗掉它會洗掉影像之間的空白。如果你想在同一頁面上滾動和元素，你應該使用帶有
flex-wrap: wrap.
為了做到這一點，我為您的案例使用了以下代碼段：
:host ::ng-deep .cdk-virtual-scroll-content-wrapper {
display: flex;
flex-wrap: wrap;
}
您可以在此處閱讀有關主機和 ng-deep 的更多資訊。但請注意，根據這篇文章（而且不僅如此），建議避免在最新版本的 Angular 中使用它。為了簡單起見，我在您的示例中使用了它，但您可能希望在生產中避免使用它。
- （額外）：作為一個小改進，我還
margin: 10px; height: auto; max-height: 400px;從.mdc-image-list__item媒體查詢中洗掉了重復的屬性（并且只留下了沒有媒體查詢的初始屬性）。無論如何它都會被應用，因為沒有任何東西可以覆寫它，只需更改媒體查詢上的 with 就足夠了。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/407773.html
標籤：