Siirry pääsisältöön

Refresher

Avaa ChatGPT:ssä
Varjo dwc-refresher 25.00
Java API

Pull-to-refresh on yleinen malli mobiili- ja napinpainalluksille suunnatuissa käyttöliittymissä, ja Refresher-komponentti tuo sen vieritettävälle säiliöille webforJ:ssä. Kun käyttäjät pyyhkäisevät alaspäin määritellyn kynnyksen yli, se siirtyy visuaalisten tilojen läpi: pull, release ja refreshing, joista jokaisella on mukautettava ikoni ja paikallistettu teksti. Se toimii hyvin yhdessä InfiniteScroll kanssa, jotta sisällön lataaminen tai nollaaminen tapahtuu elepohjaisesti.

Instansointi ja kansainvälistäminen​

Lisää Refresher instanssoimalla se ja rekisteröimällä päivityskuuntelija. Kun päivitystoimenpiteet on suoritettu, kutsu finish() nollataksesi komponentin lepotilaan.

Kuinka aktivoida Refresher

Aktivoidaksesi Refresher, napsauta ja vedä alaspäin vieritettävällä alueen yläosasta. Vaikka tämä ele on tuttu mobiililaitteilla, se on harvinaisempi työpöydällä—varmista, että pidät ja vedät hiirellä.

Näytä koodi

Tätä lähestymistapaa käytetään usein sivutettujen luetteloiden päivittämiseen tai äärettömän vierityksen lataamisen aloittamiseen.

Kansainvälistäminen​

Jokaisen tilan etiketti voidaan myös paikallistaa RefresherI18n-objektin avulla. Kolme tilaa ovat:

  • Pull: Alkuperäisen eleen teksti (esim. "Vedä alaspäin päivittääksesi")
  • Release: Kynnys saavutettu (esim. "Vapauta päivittääksesi")
  • Refresh: Lataustila (esim. "Päivitetään")

Tämä mahdollistaa monikielisen tuen ja brändiä tarvittaessa säätämisen.

Näytä koodi

Ikonikustomointi​

Voit vaihtaa Icons -kuvakkeita, joita käytetään pull/release ja refreshing -vaiheissa joko ennalta määritellyn Icon avulla tai Ikoni-URL:n avulla. Nämä ovat käyttökelpoisia, kun haluat soveltaa brändäystä tai mukautettua animaatiota.

Näytä koodi

Vedon käyttäytymisen konfigurointi​

Kynnys​

Aseta, kuinka pitkälle käyttäjän on vedettävä alaspäin (pikseleinä) ennen päivityksen laukaamista:

refresher.setThreshold(80); // oletus: 80px

Kynnysmaksimi​

Määritä sallitun maksimivedon etäisyys käyttämällä setThresholdMax()-metodia:

refresher.setThresholdMax(160);

Nämä kynnykset hallitsevat eleen herkkyyttä ja vastustuskäyrää.

Tilahallinta​

Refresher-komponentti ylläpitää omaa sisäistä tilaansa ja kommunikoi tilamuutoksista tapahtumien kautta. Kun käyttäjä vetää alaspäin määritellyn kynnyksen yli, Refresher laukaisee päivitystapahtuman, johon voit reagoida rekisteröimällä onRefresh()-kuuntelijan.

Tämän kuuntelijan sisällä odotetaan, että suoritat tarvittavat toimenpiteet—kuten uusien tietojen hakeminen tai luettelon nollaaminen—ja kutsut sitten nimenomaan:

refresher.finish();
Puuttuva finish()

Jos unohdat kutsua finish(), refresher jää lataustilaan ikuisesti.

Voit myös ohjelmallisesti poistaa Refresher-toiminnon käytöstä milloin tahansa estääksesi käyttäjää käynnistämästä päivitystoimintoa:

refresher.setEnabled(false);

Tämä on hyödyllistä, kun päivityksiä tulisi tilapäisesti estää—esimerkiksi latausnäytön aikana tai kun toinen kriittinen prosessi on käynnissä.

Tyylittely​

Teemat​

Refresher-komponentti tukee useita teemoja, joilla voidaan visuaalisesti erottaa eri tilat tai sovittaa sovelluksesi tyyliin. Teemoja voidaan soveltaa käyttämällä setTheme()-metodia.

Alla oleva esimerkki kiertää kaikkia saatavilla olevia teemoja, kun vedät päivittääksesi, antaen sinulle live-esikatselun siitä, miltä Refresher näyttää eri teemoissa:

Näytä koodi

Loading...