webf-infinite-scrolling
Create high-performance infinite scrolling lists with pull-to-refresh and load-more capabilities using WebFListView. Use when building feed-style UIs, product catalogs, chat messages, or any scrollable list that needs optimal performance with large datasets.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Create high-performance infinite scrolling lists with pull-to-refresh and load-more capabilities using WebFListView. Use when building feed-style UIs, product catalogs, chat messages, or any scrollable list that needs optimal performance with large datasets.
How to use
Zainstaluj WebF w swoim projekcie jako zależność npm i skonfiguruj bundler (Vite, Webpack) zgodnie z dokumentacją WebF. Możesz używać React, Vue, Svelte lub innego frameworka — WebF wspiera standardowe narzędzia webowe.
Zaimportuj komponent WebFListView z biblioteki WebF do pliku, w którym budujesz listę przewijalną.
Opakowaniem WebFListView bezpośrednio elementy listy — każdy element musi być bezpośrednim dzieckiem komponentu. Nie umieszczaj elementów wewnątrz dodatkowych kontenerów (div, section itp.), ponieważ struktura bezpośrednia jest wymagana, aby Flutter mógł zoptymalizować renderowanie.
Dodaj obsługę pull-to-refresh i load-more poprzez callbacki dostępne w WebFListView — komponent udostępnia natywne zdarzenia do obsługi odświeżania i ładowania kolejnych danych.
Testuj wydajność przewijania w aplikacji — WebF automatycznie wirtualizuje widoki i recykluje elementy poza ekranem, dlatego nawet listy z tysiącami elementów będą płynne bez dodatkowej konfiguracji.
Wdróż aplikację na Vercel, Netlify lub inną platformę wspierającą WebF — proces jest identyczny jak w standardowych projektach webowych.