Siirry pääsisältöön

Refresher

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

Refresher-komponentti webforJ:ssä mahdollistaa pull-to-refresh -vuorovaikutuksen vieritettävissä astioissa – täydellinen dynaamisen datan lataamiseen mobiililaitteissa tai kosketusystävällisissä käyttöliittymissä. Kun käyttäjät pyyhkäisevät alaspäin konfiguroitavan kynnyksen yli, refresher siirtyy visuaalisiin tiloihin: pull, release, ja refreshing. Jokainen tila esittää mukautettavan ikonin ja lokalisoidun tekstin, joka selvästi viestii palautetta.

Voit käyttää Refresher-komponenttia yhdessä komponenttien, kuten InfiniteScroll, kanssa ladata sisältöä tai nollata tilan yksinkertaisella gestuuriin perustuvalla syötteellä. Komponentti on täysin konfiguroitavissa vuorovaikutuskäyttäytymisen, ulkoasun, lokalisaation ja integroinnin osalta muun UI:si kanssa.

Instansiointi ja kansainvälistäminen​

Lisää Refresher instansioimalla se ja rekisteröimällä päivityskuuntelija. Kun päivitystoiminnot on saatu päätökseen, kutsu finish() nollataksesi komponentin lepotilaan.

Kuinka aktivoida Refresher

Aktivoidaksesi Refresher, napsauta ja vedä alaspäin vieritettävän alueen yläosasta. Vaikka tämä ele on tuttu mobiililaitteilla, se ei ole niin yleinen työpöydällä – varmista, että pidät ja vedät hiirelläsi.

Näytä koodi

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

Kansainvälistäminen​

Jokaisen tilan etiketti voidaan myös lokalisoida käyttämällä RefresherI18n -objektia. Kolme tilaa ovat:

  • Pull: Alkuperäinen eleteksti (esim. "Vedä alas päivittääksesi")
  • Release: Käynnistyskynnys saavutettu (esim. "Päästäksesi päivittääksesi")
  • Refresh: Lataustila (esim. "Päivitetään")

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

Näytä koodi

Ikonien mukauttaminen​

Voit muuttaa Icons -ikoneita, joita käytetään pull/release ja refreshing -vaiheissa joko ennaltamäärätyn Icon tai Ikoni-URL:n avulla. Nämä ovat hyödyllisiä, kun haluat soveltaa brändäystä tai mukautettua animaatiota.

Näytä koodi

Vetokäyttäytymisen konfigurointi​

Kynnysarvo​

Määritä kuinka kauas käyttäjän on vedettävä alaspäin (pikseleinä) ennen päivityksen käynnistämistä:

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

Kynnysarvon maksimi​

Määritä sallittu maksimi vedon etäisyys 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 viestii tilamuutoksista tapahtumien kautta. Kun käyttäjä vetää alaspäin määritellyn kynnyksen ohi, Refresher lähettää päivitystapahtuman, johon voit reagoida rekisteröimällä onRefresh() -kuuntelijan.

Tämän kuuntelijan sisällä olet odotettu suorittamaan tarvittava toimenpide – kuten uusien tietojen hakeminen tai luettelon nollaaminen – ja sitten kutsumaan selvästi:

refresher.finish();
Puuttuva finish()

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

Voit myös ohjelmallisesti poistaa Refresher-komponentin käytöstä milloin tahansa estääksesi käyttäjää laukaiselemasta päivitystoimintaa:

refresher.setEnabled(false);

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

Tyylittely​

Teemat​

Refresher-komponentti tukee useita teemoja eri tilojen visuaaliseksi erottamiseksi tai sovittamiseksi sovelluksesi ilmeeseen. Teemat voidaan soveltaa käyttämällä setTheme() -metodia.

Seuraava esimerkki kiertää kaikki saatavilla olevat teemat joka kerta, kun vedät päivittääksesi, antaen sinulle live-esikatselun siitä, miltä Refresher näyttää eri teemoissa:

Näytä koodi

Loading...