InfiniteScroll
InfiniteScroll-komponentti webforJ:ssä lataa automaattisesti lisää sisältöä, kun käyttäjät vierittävät alaspäin, jolloin sivutusta ei tarvita. Tämä luo sujuvan kokemuksen luetteloille, syötteille ja dataraskaalle näkymille lataamalla sisältöä vain tarvittaessa.
Kun käyttäjät saavuttavat vieritettävän sisällön alaosan, InfiniteScroll laukaisee tapahtuman lisäämään dataa. Kun uusi sisältö latautuu, näytetään Spinner mukautettavalla tekstillä, joka ilmoittaa, että lisää kohteita on tulossa.
Tilan hallinta
InfiniteScroll-komponentti lähettää tapahtumia ja ylläpitää sisäistä tilaa auttaakseen hallitsemaan, miten ja milloin sisältöä ladataan.
Näytä koodi
- InfiniteScrollView.java
- infinitescroll.css
Jos haluat ladata lisää dataa, kun käyttäjä vierittää, käytä onScroll()- tai addScrollListener()-menetelmää rekisteröidäksesi kuuntelijan. Kuuntelijassa ladataan tyypillisesti lisäsisältö ja kutsutaan update() päivittämään InfiniteScroll-tila.
infiniteScroll.onScroll(event -> {
infiniteScroll.add(new Paragraph("Ladattu kohde"));
infiniteScroll.update();
});
Kun kaikki sisältö on ladattu, merkitse vieritys suoritetuksi estääksesi lisälaukaisuja. Kun olet asettanut suoritetuksi, muista kutsua update() soveltaaksesi uutta tilaa:
infiniteScroll.setCompleted(true);
infiniteScroll.update();
Tämä estää lisäinfiniittisen vierityksen käytöstä.
Voit nollata tämän lipukkeen käyttämällä setCompleted(false), jos päätät myöhemmin sallia käyttäjän ladata lisää sisältöä (esim. päivityksen jälkeen).
Latausindikaattorin mukauttaminen
Oletuksena InfiniteScroll näyttää sisäänrakennetun latausindikaattorin - pienen animaatioitu Spinner yhdessä “Ladataan dataa” -tekstin kanssa. Voit muuttaa näytettävää tekstiä antamalla mukautetun viestin InfiniteScroll-rakentajalle 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
- InfiniteScrollLoadingView.java
- infinitescroll.css
Täysi mukauttaminen
Jos haluat täysin korvata sekä Spinner että tekstin omalla markupillasi, voit lisätä sisältöä suoraan erityiseen sisältöpaikkaan käyttämällä addToContent().
Kun täytät sisältöpaikan, se korvaa oletuslatauslayoutin täysin.
Näytä koodi
- InfiniteScrollCustomLoadingView.java
- infinitescrollcustom.css