luxInfiniteScroll v16

luxInfiniteScroll

• luxInfiniteScroll
  • Overview / API
    • Allgemein
    • @Input
  • Beispiele
    • 1. Mit LUX-List
    • 2. Mit Div-Elementen

Overview / API

Allgemein

Name	Beschreibung
import	LuxDirectivesModule
selector	luxInfiniteScroll

@Input

Name	Typ	Beschreibung
luxScrollPercent	number	Prozentzahl in der Scrollbar, ab der das luxScrolled-Event emitted wird.
luxImmediateCallback	boolean	Einstellung ob bei Initiierung ein luxScrolled-Event abgegeben wird.
luxIsLoading	boolean	Teilt der Komponente mit, ob gerade Daten geladen werden.
luxScrolled	EventEmitter <void>	Event, wenn das scrollende Element neue Daten bereitstellen sollte.

Beispiele

1. Mit LUX-List

Ts

list: any[] = [];

constructor() {
  for(let i = 0; i < 10; i++) {
    this.list.push(`Item #${i}`);
  }
}

onScroll() {
  const startIndex = this.list.length;
  for(let i = 0; i < 10; i++) {
    this.list.push(`Item #${ startIndex + i}`);
  }
}

Html

<div style="height: 500px">
  <lux-list
    class="lux-flex lux-flex-col"
    luxInfiniteScroll
    [luxScrollPercent]="80"
    [luxImmediateCallback]="true"
    (luxScrolled)="onScroll()"
  >
    <lux-list-item
      [luxTitle]="item"
      *ngFor="let item of list"
      class="lux-min-width-80"
    >
      <lux-list-item-icon>
        <lux-icon luxIconName="lux-programming-module-puzzle"></lux-icon>
      </lux-list-item-icon>
      <lux-list-item-content class="lux-min-width-80">
        Ich bin das {{ item }}.
      </lux-list-item-content>
    </lux-list-item>
  </lux-list>
</div>

2. Mit Div-Elementen

Ts

  list: any[] = [];

  constructor() {
    for(let i = 0; i < 10; i++) {
      this.list.push(`Item #${i}`);
    }
  }

  onScroll() {
    const startIndex = this.list.length;
    for(let i = 0; i < 10; i++) {
      this.list.push(`Item #${ startIndex + i}`);
    }
  }

Html

<div
  style="height: 100%; width: 100%; overflow-y: auto"
  luxInfiniteScroll
  [luxScrollPercent]="80"
  [luxImmediateCallback]="false"
  (luxScrolled)="onScroll()"
>
  <div style="min-height: 100px; min-width: 400px" *ngFor="let item of list">
    {{ item }}
  </div>
</div>