Angular Material 滚动加载的项目比预期的多

Question

我试图通过虚拟滚动组件加载 20 个项目，但页面加载后我看到了 34 个项目，根本没有进行任何滚动。我弄错了 css 吗？或者我忘记了控件上的某些设置？该项目位于 here.

Answer 1

一个想法是只加载几个项目并使用观察者加载下一批项目

<cdk-virtual-scroll-viewport 
     itemSize="10" 
     minBufferPx="1200" 
     maxBufferPx="1200" 
     (scrolledIndexChange)="getNextBatch($event)">
  ...
</cdk-virtual-scroll-viewport>

import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { ImageService } from '../image.service';
import { Subscription } from 'rxjs';
import { Router } from '@angular/router';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';

@Component({
  selector: 'app-gallery',
  templateUrl: './gallery.component.html',
  styleUrls: ['./gallery.component.css'],
})
export class GalleryComponent implements OnInit, OnDestroy {
  @ViewChild(CdkVirtualScrollViewport) viewport: CdkVirtualScrollViewport;

  constructor(public service: ImageService, private router: Router) {}

  ...

  getNextBatch(e) {
     const end = this.viewport.getRenderedRange().end;
     const total = this.viewport.getDataLength();

     console.log(end)
     console.log(total)

     if (end === total) {
        console.log('request next batch');
     }
  }
}

Answer 2

This tutorial on Firebase 说：

Let’s start by reviewing a few important concepts with virtual scroll. First, you declare the cdk-virtual-scroll-viewport component to provide a context for virtual scrolling. It should have an itemSize input property defined as the pixel height of each item.

你可以看到这并不是专门为网格滚动视图制作的，但我们可以解决这个限制：

您有 5 列图像，每列 160 像素高加上边距顶部和底部每 10 像素，产生 180 像素。

现在我们计算180除以5得到36。这就是你需要的itemSize。

<cdk-virtual-scroll-viewport itemSize="36">
  <div class="image" *cdkVirtualFor="let image of images">
    <a (click)="viewDetail(image)">
      <img src="https://picsum.photos/200/160/?image={{ image.id }}" />
    </a>
  </div>
</cdk-virtual-scroll-viewport>

见this fork of your StackBlitz

官方文档在这里：Angular | Scrolling

您也可以更改缓冲区大小

<cdk-virtual-scroll-viewport itemSize="36" minBufferPx="540" maxBufferPx="540">
  <!-- ... -->
</cdk-virtual-scroll-viewport>

见： Angular | Scrolling # Scrolling over fixed size items

你也可以让Angular算一下：

<cdk-virtual-scroll-viewport itemSize="{{ 180 / 5 }}" minBufferPx="{{ 180 * 3 }}" maxBufferPx="{{ 180 * 3 * 3 }}">

这意味着您将提前加载三页（每页 3 行），如果只剩下一个页面缓冲区（每页 3 行图像），则加载更多

Angular Material 滚动加载的项目比预期的多

Angular Material Scroll loads more items than expected

angular

angular-material

virtualscroll

angular-cdk-virtual-scroll