Бесконечная прокрутка с использованием угловой виртуальной прокрутки - PullRequest
Новая
       9

Бесконечная прокрутка с использованием угловой виртуальной прокрутки

0 голосов
/ 19 ноября 2018

Я пытаюсь реализовать как бесконечную прокрутку, так и виртуальную прокрутку, используя виртуальную прокрутку Angular CDK.

Я создал реализацию, которая работает, но есть несколько вещей, которые мне не нравятся и которые я хотел бы улучшить:

  1. То, как я выясняю, что элемент виден - я создал фиктивный метод с именем itemRendered и отображаю его в HTML - и на основании этого я обновляю список. Могу ли я использовать более предсказуемое событие?

  2. Я использую 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);

    }
  }

код на стеке

...