标签: virtualscroll

我正在实现一个像 twitter 这样包含图像和文本的提要屏幕。我正在使用 angular 4。目前我正在使用Virtual Scroll来提高用户滚动深度（如 100 个项目）时的性能。我的问题是在我的列表中所有项目的大小都是可变的，并且这个库不完全支持动态高度。就像需要一些最小的固定高度。这会导致在移动设备和某些浏览器中闪烁。如果可能的话，我想用 Angular 实现 React Js Virtual scroll。任何人都可以向我建议任何解决方案，以便我的提要列表变得顺畅。

我想使用带有角度材质表的虚拟滚动条。而且我不想使用分页功能。我的代码如下。

<mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="psa_invoice_number">
          <mat-header-cell [style.flex]="'0 0 10%'" *matHeaderCellDef><span> INV NO. </span></mat-header-cell>
          <mat-cell *matCellDef="let element">
            <span> {{element.psa_invoice_number}} </span>
          </mat-cell>
        </ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
        <mat-row  *matRowDef="let row; columns: displayedColumns;"></mat-row>
      </mat-table>

由于HTML解析tr然后td，使用<cdk-virtual-scroll-viewport>中断视图是否有任何cdkVirtualScrollViewport作为指令<tbody>？

<tbody>
<cdk-virtual-scroll-viewport  style="height: 500px; width: 100%;"  itemSize="100"
    <tr [hidden]="data.get_user.name.toLowerCase().indexOf(pupilFilter.name.toLowerCase()) < 0 || (pupilFilter.classValue != '0' && data.get_class.value != pupilFilter.classValue)" appMarkClicked="" *cdkVirtualFor="let data of top.data.branch.get_users_as_pupil; let i = index" >
        <td>{{i + 1}}</td>
    </tr>
</cdk-virtual-scroll-viewport>
</tbody>

我使用<cdk-virtual-scroll-viewport>固定项目大小进行虚拟滚动。

此外，我使用ActiveDescendantKeyManagerCDK A11y 提供的功能在视口内使用箭头键移动。

当我尝试同时使用它们时，出现以下问题：

由于虚拟滚动仅加载部分信息并在滚动（回收视图）时加载更多信息，因此ActiveDescendantKeyManager仅获取<cdk-virtual-scroll-viewport>. 当我加载更多时，索引会重复自己，因为虚拟滚动添加和删除项目，keyManager只是行为很奇怪，因为我希望索引按顺序排列（如果我有 5000 个项目，我希望索引按顺序排列，而不仅仅是从1-24，每次我滚动它们都会重复）。 这是 stackblitz 上的一个例子

我的问题是：有什么办法可以与他们一起工作吗？因为我想做的是用箭头键移动到以下滚动索引。

我想用 cdk-virtual-scroll-viewport在时间线视图中使用不同高度的项目。

因此itemSize="x"，根据文档参考设置列表中项目的大小（以像素为单位）是不切实际的。

autosize 尚不可用。

可以使用cdk-virtual-scroll-viewport可变大小的虚拟/无限滚动吗？

更新资料

我一直在寻找替代的虚拟/无限滚动解决方案，而且我几乎无法相信，似乎没有解决方案可用于动态行高，即使使用https://github.com/rintoj/ngx-virtual-scroller也不推荐使用。

更新2,2019年7月

由于与此同时仍然没有解决方案，因此我认为解决此问题的“足够好”的方法是加载固定数量的项目，并在列表底部添加一个按钮以加载更多项目，如本示例所示：https://stackblitz.com/edit/ang-mat-load-more

我在 Angular 7 中使用虚拟滚动。我创建了一个CdkVirtualScrollViewport监听器，并为每个滚动事件添加一个监听器。我的意思是我希望在该视口内滚动时收到通知。

我尝试注入scrollDispatcher我的组件，但我看到它scrolled()是在整个组件上滚动时触发的，然后我发现它绑定到组件而不是仅绑定到CdkVirtualScrollViewport.

这是我的代码：

@ViewChild(CdkVirtualScrollViewport) virtualScroll: CdkVirtualScrollViewport;

items: Array<any>;

constructor(private scrollDispatcher: ScrollDispatcher, private cd: ChangeDetectorRef) {
this.items = [];
}

ngOnInit(): void {
  for (let i = 0; i < 100; i++) {
    this.items.push(i);
  }
}

ngAfterViewInit(): void {
this.scrollDispatcher.scrolled()
  .subscribe(event => {
    console.log('scrolled');
  });
}

正如您所看到的，CdkVirtualScrollViewport这是我的组件内的一个子元素：

<div class="header">
  {{header}}
</div>

<div class="container">
  <cdk-virtual-scroll-viewport itemSize="4" class='example-viewport'>
    <li *cdkVirtualFor="let item of items" class='example-item' >{{item}}</li>
  </cdk-virtual-scroll-viewport>
</div>

<div class="footer">
  {{footer}} …

有什么方法可以激活cdk-virtual-scroll-viewport水平方向的鼠标滚动吗？

正如我们在角度材料的示例中看到的那样，您只能通过从滚动条拖动来滚动，但不能仅使用鼠标滚轮进行滚动。

https://material.angular.io/cdk/scrolling/overview

我的目的是拥有一个像 Netflix 一样带有图像的组件，并且只需使用鼠标滚轮即可滚动它们。

第二个问题是：有人有这方面的例子吗？

我想实现这样的目标：

https://codepen.io/CalvinMorett/post/incorporate-horizo​​ntal-scrolling-mousewheel

请教我如何制作虚拟卷轴。我使用 HTML、JS、Vue。我尝试使用vue-virtual-scroll，但是由于很难将其更改为我想要的功能，因此我将制作一个基本部分并应用它。请告诉我如何制作基本的虚拟卷轴。

是否有与网格列表配合使用的虚拟滚动实现？我认为默认实现不会起作用，因为每一行周围都应有一个元素。

我正在使用网格列表显示个人资料图片，并且需要无限滚动或最好是虚拟滚动才能加载新的图片。

我正在为我的应用程序使用 Angular-Material Autocomplete（版本 7）。我用的是<cdk-virtual-scroll-viewport>里面的 除了我已经解决的许多问题之外，还有一个我不明白的问题：

当我添加 max-height css 时，下拉菜单不会显示，如果我添加高度，它将以固定高度显示。

这是我的代码的一部分：html：

<mat-form-field class="single-select">
  <input matInput #singleInput class="single-input layout flex" type="text" [formControl]="selectControl" [matAutocomplete]="auto" (blur)="onBlur()" (focus)="onFocus()">

  <mat-autocomplete class="single-autocomplete" #auto="matAutocomplete" [displayWith]="displayFn">
    <cdk-virtual-scroll-viewport itemSize="45" minBufferPx="360" maxBufferPx="360" class="virtual-scroll">
      <mat-option *cdkVirtualFor="let option of filteredOptions" [class.selected]="option === oldValue" [value]="option" (click)="onSelect(option)">{{option.label}}</mat-option>
    </cdk-virtual-scroll-viewport>
  </mat-autocomplete>
</mat-form-field>

TS：

export class SingleSelectComponent implements OnInit {
  @Input() value;
  @Input('options')
  set options(value) {
    if (value) {
      this.filteredOptions = value.slice();
      this.data = value;
      this.initValue();
    }
  }
  @Output() formValue = new EventEmitter<any>();

  @ViewChild('singleInput') singleInput;

  selectControl …