Угловой бесконечный цикл виртуальной прокрутки CDK - PullRequest
Новая
       20

Угловой бесконечный цикл виртуальной прокрутки CDK

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

Я пытаюсь реализовать прокрутку с бесконечным циклом для списка элементов, используя виртуальную прокрутку CDK

Я достиг точки, где я сдался. Я не могу сделать это, как я могу добиться этого виртуальной прокрутки CDK?

Вот мой код 

import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { Observable, BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  template: `
   <ng-container *ngIf="infinite | async; let items">

     <cdk-virtual-scroll-viewport itemSize="50" 
                                  (scrolledIndexChange)="nextBatch($event, (items[items.length - 1].index))">
       <div *cdkVirtualFor="let item of items; trackBy: trackByIdx">{{item}}</div>
     </cdk-virtual-scroll-viewport>

   </ng-container>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {

  arr = Array.from({ length: 10 }).map((_, i) => `Item #${i}`);

  offset = new BehaviorSubject<any>({ offset: 0 });
  infinite: Observable<any[]>;

  @ViewChild(CdkVirtualScrollViewport) viewPort: CdkVirtualScrollViewport;


  constructor() {
    this.infinite = this.offset.pipe(
      map((n: any) => this.getBatch(n)),
    );
  }

  getBatch({ offset, loadPrev, loadNext, e }) {
    let arr = [...this.arr];
    if (loadPrev) {
      const last = arr[arr.length - 1];
      return [last, ...arr];
    }
    if (loadNext) {
      const first = arr[0];
      return [...arr, first];
    }
    return arr;
  }

  nextBatch(e, offset) {
    const end = this.viewPort.getRenderedRange().end;
    const start = this.viewPort.getRenderedRange().start;
    const total = this.viewPort.getDataLength();

    if (start === 0) {
      this.offset.next({ offset: offset, loadPrev: true, e });
    }

    if (end === total) {
      this.offset.next({ offset: offset, loadNext: true, e });
    }
  }

  trackByIdx(i) {
    return i;
  }
}

Живой стек

Ответы [ 2 ]

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

Нам просто нужно проверить, прокручивается ли прокрутка до последнего элемента, а затем вернуться к первому элементу. Например:

app.component.html 

<cdk-virtual-scroll-viewport class="example-viewport" [itemSize]="itemSize" (scrolledIndexChange)="onScroll($event)">
    <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

app.component.ts 

items = Array.from({ length: 100 }).map((_, i) => `Item #${i}`);
itemSize = 5;
@ViewChild(CdkVirtualScrollViewport) viewPort: CdkVirtualScrollViewport;

onScroll(event) {
    console.log(event);
    if( event >= ((this.items.length-this.itemSize-1)*10) ) {
      this.viewPort.scrollToIndex(0);
    }
}

https://angular -utnzft.stackblitz.io

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

cdk-virtual-scroll-viewport должен иметь высоту, а элементы, над которыми он зацикливается, также должны иметь фиксированную высоту. Компоненту нужна эта информация, чтобы вычислить, когда элемент должен быть визуализирован или удален.

* 1003 например * 

cdk-virtual-scroll-viewport {
  height: 100vh;

  li {
    height: 100px;
  }
}
...