Siirry pääsisältöön

Refresher

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

Pull-to-refresh on yleinen malli mobiili- ja napinpainamisystävällisissä käyttöliittymissä, ja Refresher-komponentti tuo sen rolattaviin säiliöihin 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, jokaisessa on mukautettava kuvake ja lokalisoitu teksti. Se sopii hyvin yhteen InfiniteScroll kanssa sisällön lataamista tai nollaamista varten elepohjaisella syötteellä.

Instansiointi ja kansainvälistäminen​

Lisää Refresher instansioimalla se ja rekisteröimällä päivityskuuntelija. Kun päivitystoiminnot ovat valmiit, kutsu finish() palauttaaksesi komponentti lepotilaan.

Kuinka aktivoida Refresher

Aktivoidaksesi Refresher, napsauta ja vedä alaspäin rullattavan alueen yläreunasta. Vaikka tämä ele on tuttu mobiililaitteilla, se ei ole yhtä yleinen työpöydällä—muista pitää ja vetää hiirellä.

Näytä koodi

Tätä lähestymistapaa käytetään yleisesti uusiin sivuisiin luetteloihin päivittämisessä tai äärettömän vierityksen lataamisen aloittamisessa.

Kansainvälistäminen​

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

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

Tämä mahdollistaa monikielisen tuen ja brändäyksen säädöt tarpeen mukaan.

Näytä koodi

Kuvake mukauttaminen​

Voit vaihtaa Icons, joita käytetään pull/release ja refreshing vaiheissa, käyttäen joko ennalta määriteltyä Icon tai Kuvake URLia. Nämä ovat hyödyllisiä, kun haluat soveltaa brändäystä tai mukautettua animaatiota.

Näytä koodi

Vedon käyttäytymisen konfigurointi​

Kynnysarvo​

Aseta kuinka kauas käyttäjän täytyy vetää alaspäin (pikseleinä) ennen kuin päivittämistä laukaistaan:

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

Kynnyksen maksimi​

Määritä sallitun vetomatkan maksimiarseno käyttämällä setThresholdMax()-metodia:

refresher.setThresholdMax(160);

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

Tilanhallinta​

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

Tämän kuuntelijan sisällä sinun odotetaan toteuttavan tarvittavat toiminnot—esimerkiksi uusien tietojen hakemisen tai luettelon nollaamisen—ja sitten nimenomaan kutsuvan:

refresher.finish();
Puuttuva finish()

Jos unohdat kutsua finish(), refresher pysyy lataustilassa ikuisesti.

Voit myös ohjelmallisesti estää Refresher-toiminnan milloin tahansa estääksesi käyttäjää laukaamassa päivitys käyttäytymistä:

refresher.setEnabled(false);

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

Tyylit​

Teemat​

Refresher-komponentti tukee useita teemoja erottaakseen visuaalisesti erilaisia tiloja tai vastatakseen sovelluksesi ilmeen ja tunnelman. Teemoja voidaan soveltaa käyttämällä setTheme()-metodia.

Seuraava esimerkki kierrättää kaikkia saatavilla olevia teemoja aina kun vedät päivitystä varten, antaen sinulle live-esikatselun siitä, miltä Refresher näyttää eri teemoissa:

Näytä koodi

Loading...