VirtualItem

Das VirtualItem-Objekt repräsentiert ein einzelnes Element, das vom Virtualizer zurückgegeben wird. Es enthält Informationen, die Sie benötigen, um das Element im Koordinatenraum innerhalb des scrollElements Ihres Virtualizers zu rendern, sowie weitere nützliche Eigenschaften/Funktionen.

export interface VirtualItem {
  key: string | number | bigint
  index: number
  start: number
  end: number
  size: number
}

export interface VirtualItem {
  key: string | number | bigint
  index: number
  start: number
  end: number
  size: number
}

Die folgenden Eigenschaften und Methoden sind für jedes VirtualItem-Objekt verfügbar

key: string | number | bigint

key: string | number | bigint

Der eindeutige Schlüssel für das Element. Standardmäßig ist dies der Elementindex, sollte aber über die getItemKey-Option des Virtualizers konfiguriert werden.

index: number

index: number

Der Index des Elements.

start: number

start: number

Der anfängliche Pixelversatz für das Element. Dies wird normalerweise auf eine CSS-Eigenschaft oder Transformation wie top/left oder translateX/translateY abgebildet.

end: number

end: number

Der endgültige Pixelversatz für das Element. Dieser Wert ist für die meisten Layouts nicht unbedingt erforderlich, kann aber hilfreich sein, daher haben wir ihn trotzdem bereitgestellt.

size: number

size: number

Die Größe des Elements. Dies wird normalerweise auf eine CSS-Eigenschaft wie width/height abgebildet. Bevor ein Element mit der Methode VirtualItem.measureElement gemessen wurde, ist dies die geschätzte Größe, die von Ihrer estimateSize-Option des Virtualizers zurückgegeben wird. Nachdem ein Element gemessen wurde (falls Sie es überhaupt messen möchten), ist dieser Wert die Zahl, die von Ihrer measureElement-Option des Virtualizers zurückgegeben wird (die standardmäßig so konfiguriert ist, dass Elemente mit getBoundingClientRect() gemessen werden).

lane: number

lane: number

Der Lane-Index des Elements. In normalen Listen wird er immer auf 0 gesetzt, wird aber für Masonry-Layouts nützlich (siehe Variablenbeispiele für weitere Details).