在移动设备上尤其明显。每当用户滚动时它都会立即刷新，如果用户快速滚动，则很难渲染？

我正在寻找具有以下功能的角度虚拟滚动包：1）水平虚拟滚动2）容器宽度和高度是可变的。3) 项目宽度设置为容器宽度的百分比。4) 项目可以在渲染期间最小化。

Angular cdk 目前使用固定的 itemSize 来确定高度和宽度......下面是一个如何渲染它的示例：

.parent {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 10px;
}
.child {
  width: 33.333%;
  height: 100%;
}
.child.mini {
  width: 40px;
}

<div class="parent">
  <div class="child" *ngFor="let item of items" [class.mini]="item.isMini">
    <button (click)="item.isMini = !item.isMini">Minimize Me!</button>
    {{item.name}}
  </div>
</div>

有什么推荐吗？

我想提出一些理论问题。

假设我有一个无限滚动，实现了如下所述的内容：https : //medium.com/frontend-journeys/how-virtual-infinite-scrolling-works-239f7ee5aa58。没什么好看的，说它是一张数据表，比如说NxN就够了，用户可以向下和向右滚动，就像电子表格一样，它只会显示当前视图中的数据加减一个处理。

现在，我们还假设在该视图中“获取和显示”数据大约需要 10 毫秒，使用如下函数：

get_data(start_col, end_col, start_row, end_row);

当单击滚动条中的某处或执行“轻微滚动”以呈现必要的数据时，这会立即加载。但是，我们还假设对于每个“未完成的获取事件”，呈现必要的视图数据所需的时间加倍（由于内存、gc 和其他一些原因）。因此，如果我以缓慢的故意方式从左到右滚动，我可能会生成 100 多个滚动事件，这些事件会触发数据加载——起初明显延迟为零。获取在 10 毫秒内发生，但很快就开始需要 20 毫秒，然后是 40 毫秒，现在我们有一个明显的延迟，直到加载必要的数据超过一秒。此外，我们不能使用诸如去抖动/延迟之类的东西，

我需要考虑哪些因素以及实现此目的的示例算法是什么样的？这是我希望对数据进行的用户交互示例，假设有一个 10000 x 10000 的电子表格（尽管 Excel 可以一次加载所有数据）——https://gyazo.com/0772f941f43f9d14f884b7afeac9f414。

我想在Angular应用程序上使用虚拟滚动。我列表中的项目是远程页面搜索的结果。每当我向下滚动视口时，我想加载更多结果（调用下一页）。

这是我的模板：

<div class="container">
    <cdk-virtual-scroll-viewport itemSize="100">
        <li *cdkVirtualFor="let item of searchResult">{{item}}</li>
    </cdk-virtual-scroll-viewport>
</div>

这是我根据需要进行的尝试：

export class SearchComponent {
    @ViewChild(CdkVirtualScrollViewport) virtualScroll: CdkVirtualScrollViewport;
    searchPageNumber: number;
    searchResults: Array<any>;

    constructor(private scrollDispatcher: ScrollDispatcher, private searchService: SearchService) {
        this.searchPageNumber = 0;
        this.searchResults = [];
    }

    ngOnInit(): void {
        this.nextSearchPage(this.searchPageNumber);
    }

    ngAfterViewInit(): void {
        //this.scrollDispatcher.register(this.scrollable);
        //this.scrollDispatcher.scrolled(1000)
        //    .subscribe((viewport: CdkVirtualScrollViewport) => {
        //        console.log('scroll triggered', viewport);
        //    });

        this.virtualScroll.renderedRangeStream.subscribe(range => {
            console.log('range', range);
            console.log('range2', this.virtualScroll.getRenderedRange());
            if (this.virtualScroll.getRenderedRange().end % 10 === 0) {
                this.nextSearchPage(++this.searchPageNumber);
            }
        });
    }

    nextSearchPage(pageNumber: number): …

我正在构建一个垂直滚动的日历。我正在加载最初的日子，但是当新的日子添加到列表中时，它们不会被呈现。

<cdk-virtual-scroll-viewport
  class="demo-viewport"
  [itemSize]="100"
  (onContentScrolled)="handleScrollChange($event)"
>
  <calendar-day
    *cdkVirtualFor="let day of days; trackBy: trackByFn"
    [day]="day"
  ></calendar-day>
</cdk-virtual-scroll-viewport>
<button (click)="goToToday()">go</button>

我有一项BehaviorSubject更新天数的服务。我知道天数列表正在更新，但似乎没有检测到更改。

  ngOnInit() {
    this._daysService.days$.subscribe(days => {
      this.days = days;
    })
    this.watchScroll();
    this.handleScrollingUp();
    this.handleScrollingDown();
  }

有关更多信息，StackBlitz 存储库是公开的https://stackblitz.com/edit/material-infinite-calendar

我需要的初始位置cdk-virtual-scroll-viewport不是列表的第一个元素/项目。

现在我找到了scrollToIndex和scrollTo方法，但我只能在 中使用它时才能让它们工作ngAfterViewChecked，这感觉不对。

1. 有人可以确认使用这些方法ngAfterViewChecked是正确的做事方式吗？
2. 如果没有，请展示替代方法/技术？

  @ViewChild(CdkVirtualScrollViewport) cdkVirtualScrollViewport: CdkVirtualScrollViewport;
  numbers: number[] = [];

  constructor() {
    for (let index = 0; index < 10000; index++) {
      this.numbers.push(index);
    }
  }

  ngAfterViewChecked() {
    this.cdkVirtualScrollViewport.scrollToIndex(2000);
  }

  <ul class="list">
    <cdk-virtual-scroll-viewport style="height:264px" itemSize="88">
      <ng-container *cdkVirtualFor="let n of numbers">
        <li style="height:88px">{{ n }}</li>
      </ng-container>
    </cdk-virtual-scroll-viewport>
  </ul>

我有一个包含很多项目的列表，可以选择每个项目。为此，我使用了Angular Material Virtual Scroll。选择一个项目后，选中的项目将突出显示，然后保存在服务器上。当我刷新页面时，所选项目来自服务器，并再次突出显示。

我的代码看起来像

<cdk-virtual-scroll-viewport itemSize="40" class="wrapper">
  <div *cdkVirtualFor="let item of list"
       [class.selected]="item.id === selectedItem.id">
  </div>
</cdk-virtual-scroll-viewport>

问题是，如果选择列表中下方的项目，则该项目将突出显示，但是我必须向下滚动至列表才能看到它。当该项目来自服务器时，我想以编程方式向下滚动至该项目。

我的文档中有一种scrollToIndex方法。在哪里可以找到的实例FixedSizeVirtualScrollStrategy，因此可以调用此方法？

目标

显示消息列表并在收到新消息时滚动到底部，即使我在顶部。即使使用不同高度的元素，我也想完全滚动到底部。

问题

使用虚拟滚动，我必须设置[itemSize]属性，但对我来说它不是静态值：

• 当一条消息对于一行来说太长时，它会分成多个，因此它的高度会发生变化。
• 我有不同类型的不同高度的消息（例如系统消息）。

此外，我正在使用ng-content从父级插入一个按钮来加载以前的消息。我看到的是，当_scrollToBottom被调用时，它并没有将我带到底部，而是将我带到更高一点。我怀疑这是因为虚拟滚动中元素的高度不同。

我已经从 Angular 阅读了这个自动调整滚动策略问题：https : //github.com/angular/components/issues/10113；但我不确定这会解决我的问题。

欢迎任何我能做什么的想法。

测试

代码沙盒：https : //codesandbox.io/s/angular-virtual-scroll-biwn6

• 加载消息后，向上滚动。
• 发信息。（加载新消息时，不是滚动到底部，而是虚拟滚动停止高一点）
• 重复

错误视频：https : //gofile.io/d/8NG9HD

解决方案

Gourav Garg给出的解决方案有效。只需执行两次滚动功能即可。

我现在这样做：

  private _scrollToBottom() {
    setTimeout(() => {
      this.virtualScrollViewport.scrollTo({
        bottom: 0,
        behavior: 'auto',
      });
    }, 0);
    setTimeout(() => {
      this.virtualScrollViewport.scrollTo({
        bottom: 0,
        behavior: 'auto',
      });
    }, 50);
  }

我认为它不是很优雅，但工作正常。

我用Ionic 4创建了一个新项目.我在typescript文件中有一个项目(空格)数组,我想通过Ionic虚拟滚动在模板文件中显示它们:

    <ion-list [virtualScroll]="spaces" approxItemHeight="320px">
      <ion-card *virtualItem="let space">
        <div>
          <ion-img [src]="space.picture"></ion-img>
        </div>
        <ion-card-header>
          <ion-card-title>{{ space.place}}</ion-card-title>
        </ion-card-header>
        <ion-card-content>{{ space.price}}</ion-card-content>
      </ion-card>
    </ion-list>

但是我在离子虚拟滚动时遇到错误:

Can't bind to 'virtualScroll' since it isn't a known property of 'ion-list'.

我的代码有什么问题.请帮帮我,谢谢.

场景:

• 尝试阅读此博客文章的基本虚拟滚动测试
• 数组有很多项目
• 没有错误
• 列表加载在虚拟滚动中但默认为0的高度

快速修复是为了

• 将cdk-virtual-scroll-viewport的高度设置为500px,或者在app.component.css中设置类"example-viewport"的高度

问题:克服这个零高度的正确方法是什么？

样本在https://stackblitz.com/edit/angular-efdcyc