Siirry pääsisältöön

InfiniteScroll

Avaa ChatGPT:ssa
Shadow dwc-infinite-scroll 25.00
Java API

InfiniteScroll-komponentti webforJ:ssä lataa automaattisesti enemmän sisältöä, kun käyttäjät vierittävät alas, poistaen tarpeen sivinavigoinnille. Tämä luo sujuvan kokemuksen listoille, syötteille ja dataraskaalle näkymälle lataamalla sisältöä vain tarpeen mukaan.

Kun käyttäjät saavuttavat vieritettävän sisällön alimman rajan, InfiniteScroll laukaisee tapahtuman lisäämään enemmän dataa. Uuden sisällön lataamisen aikana se näyttää Spinner, jossa on mukautettava teksti, joka ilmoittaa, että lisää kohteita on tulossa.

Näytä Koodi

Tilan hallinta​

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

Jotta voit hakea lisää dataa, kun käyttäjä vierittää, käytä onScroll() tai addScrollListener() -menetelmää rekisteröidäksesi kuuntelijan. Kuuntelijan sisällä lataat tyypillisesti lisäsisältöä ja kutsut update() päivittääksesi InfiniteScroll-tilan.

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

Kun kaikki sisältö on ladattu, merkitse vieritys suoritetuksi estääksesi myöhemmät laukaisut. Kun olet asettanut tilan suoritetuksi, muista kutsua update() soveltaaksesi uutta tilaa:

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

Tämä estää lisäinfinite vierityksen toiminnan.

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​

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

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

Vastaavasti voit mukauttaa lataamisen aikana näytettävää Icon käyttämällä setIcon().

Näytä Koodi

Täydellinen mukautus​

Jos haluat täysin korvata sekä Spinner että tekstin omalla merkinnälläsi, voit lisätä sisältöä suoraan erityiseen sisältöpaikkaan käyttäen addToContent().

Kun täytät sisältöpaikan, se korvataan kokonaan oletuslatauslayoutilla.

Näytä Koodi

Tyylittely​

Loading...