Infinite Scroll Listen

Die infinite_scroll Komponente lädt zusätzliche Inhalte, während der Benutzer scrollt. Sie bietet eine Alternative zur herkömmlichen Paginierung bei großen Datensätzen.

WCAG AA
HTMX

Funktionen

  • Automatischer Lademodus: Beim Scrollen in Richtung Ende der Seite werden automatisch weitere Inhalte geladen.

  • Button mode: Show a 'Load more' button instead of auto-loading.

  • Scroll-Schwellenwert: Konfigurierbarer Pixelabstand für die Auslösung von Ladevorgängen.

  • HTMX-Integration: Inhalte werden asynchron geladen.

HTML

Verwendung

Die Komponente wird über das infinite_scroll Tag eingebunden.

{% load insight_tags %} {% infinite_scroll config=infinite_scroll_config %} <!-- or --> {% infinite_scroll items=scroll_items request_url="/more_items/" auto_fetch=False %}

Parameter

Laden…

config (InfiniteScrollConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
request_url str

URL zum Laden weiterer Elemente.

 None True
tag_id str

Eindeutige ID für das Targeting mit JavaScript/CSS.

 "" False
items list[Any]

Anfangs anzuzeigende Elemente.

 [] False
page int

Aktuelle Seitenzahl.

 1 False
has_next bool

Ob weitere Artikel verfügbar sind.

 True False
auto_fetch bool

Wenn „True“, automatisches Laden beim Scrollen. Wenn „False“, Button anzeigen.

 True False
threshold int

Pixel-Schwellenwert, bevor weitere Daten geladen werden.

 100 False
InfiniteScrollConfig( request_url=reverse("news_list"), tag_id="news-feed", items=initial_items, page=1, has_next=True, auto_fetch=True, threshold=200, )

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Der Container verfügt über role='feed', um eine korrekte Semantik für das unendliche Scrollen zu gewährleisten.

  • Der Container verfügt über die Attribute aria-live='polite' und aria-busy, um den Ladestatus anzuzeigen.

  • Der Button „Mehr laden“ bietet eine manuelle Alternative zum automatischen Laden.

  • Inhaltselemente verwenden semantische <h3>-Überschriften für die Navigation mit Screenreadern.

  • Die Ladeanzeige hat die Eigenschaft role='status', und der visuelle Ladeindikator ist mit aria-hidden='true' ausgeblendet.

Verwandte Themen