Question

我正在尝试使用Angular CDK虚拟滚动实现无限滚动和虚拟滚动。

我创建了一个可行的实现，但是有一些我不喜欢并且有待改进的地方：

我发现一个项目在视图中的方式-我创建了一个名为itemRendered的虚拟方法，并将其呈现在HTML中-然后刷新列表。我可以使用更可预测的事件吗？
我在setTimeout事件中使用itemRendered，因为这是使它起作用的唯一方法。我尝试过ngZone，但失败了。

代码如下：

app.component.html：

<cdk-virtual-scroll-viewport [itemSize]="30" class="wrapper">
   <div *cdkVirtualFor="let item of items" class="item">
      {{item}} {{itemRendered(item)}}
   </div>
</cdk-virtual-scroll-viewport>

app.component.ts

export class AppComponent implements OnInit {
  items = [];
  lastItem = 0;
  addMoreItems() {
    let y = [];
    y.push(...this.items);
    for (let index = 0; index < 50; index++) {
      y.push(this.lastItem++);
    }
    this.items = y;
  }
  ngOnInit() {
    this.addMoreItems();
  }


  lastRefreshItems = -1;
  itemRendered(item: number) {
    var y = this.items.indexOf(item);
    if (y == this.items.length - 1) {
      if (y == this.lastRefreshItems)
        return;
      this.lastRefreshItems = y;
      console.log('want refresh');
      setTimeout(() => {
        console.log('refresh');
        this.addMoreItems();
      }, 100);

    }
  }

code on stackblitz

使用角度虚拟滚动的无限滚动

0 个答案: