Siirry pääsisältöön

InfiniteScroll

Avaa ChatGPT:ssä
Varjo dwc-infinite-scroll 25.00
Java API

InfiniteScroll-komponentti webforJ:ssa lataa automaattisesti lisää sisältöä, kun käyttäjät vierittävät alaspäin, mikä eliminoi sivutuksen tarpeen. Tämä luo sujuvan kokemuksen luetteloille, syötteille ja tietopitoisille näkymille lataamalla sisältöä vain tarvittaessa.

Kun käyttäjät saavuttavat vieritettävän sisällön alareunan, InfiniteScroll laukaisee tapahtuman lisäämään lisää tietoja. Kun uutta sisältöä ladataan, se näyttää Spinner -elementin, jossa on mukautettavissa teksti, joka kertoo, että lisää kohteita on matkalla.

Tilanhallinta​

InfiniteScroll-komponentti lähettää tapahtumia ja ylläpitää sisäistä tilaa auttaakseen hallitsemaan, kuinka ja milloin sisältöä ladataan.

Näytä koodi

Lataa lisää tietoja, kun käyttäjä vierittää, käyttämällä onScroll() tai addScrollListener() -metodia kuuntelijan rekisteröimiseksi. Kuuntelijassa lataat tyypillisesti lisäsisältöä ja kutsut update()-metodia InfiniteScroll-tilan päivittämiseksi.

infiniteScroll.onScroll(event -> {
  infiniteScroll.add(new Paragraph("Ladattu kohde"));
  infiniteScroll.update();
});

Kun kaikki sisältö on ladattu, merkitse vieritys täydelliseksi estääksesi lisälauskautumiset. Kun asetat täydelliseksi, muista kutsua update() ottaaksesi käyttöön uuden tilan:

infiniteScroll.setCompleted(true);
infiniteScroll.update();

Tämä estää lisäinfinite-vieritystoiminnon.

Nollaa latauslippu

Voit nollata tämän lipun käyttämällä setCompleted(false), jos myöhemmin sallitaan käyttäjän ladata lisää sisältöä (esim. päivityksen jälkeen).

Latausindikaattorin mukauttaminen​

Oletusarvoisesti InfiniteScroll näyttää sisäänrakennetun latausindikaattorin - pienen animaatio Spinner -elementin yhdessä “Ladataan tietoja” -tekstin kanssa. Voit muuttaa näytettävää tekstiä välittämällä mukautetun viestin InfiniteScroll-konstruktoriin tai käyttämällä setText()-metodia.

InfiniteScroll infiniteScroll = new InfiniteScroll("Haetaan lisää tietueita...");
infiniteScroll.setText("Ladataan lisää kohteita...");

Samalla tavalla voit mukauttaa lataamisen aikana näkyvää Icon -elementtiä käyttämällä setIcon()-metodia.

Näytä koodi

Täydellinen mukauttaminen​

Jos haluat täysin korvata sekä Spinner -elementin että tekstin omalla markupillasi, voit lisätä sisältöä suoraan erityiseen sisältölokeroon käyttämällä addToContent().

Kun täytät sisältölokeron, se korvataan kokonaan oletusarvoinen latauslayout.

Näytä koodi

Tyylitys​

Loading...