Vieritä Vue uudelleenkäytettävien komponenttien yläosaan

Parantaakseen käyttökokemusta millä tahansa verkkosivustolla, jonka verkkosivuilla on paljon sisältöä, on yleistä, että käyttöliittymäkehittäjät ottavat käyttöön painikkeen kautta vierityksen ylös -toiminnon, mikä tekee asioista hauskempaa ja kätevämpää käyttäjille.

Vaikka käyttäjät voivat käyttää näppäimistön komentoa + nuoli ylös, on myös tärkeää muistaa, että mahdollisesti yli puolet käyttäjistäsi saattavat käyttää mobiililaitteita eivätkä käytä puhelimeensa yhdistettyä näppäimistöä selatessaan verkkosivustoasi. Pienemmät näytöt vaativat usein myös enemmän vierittämistä, mikä tekee navigoinnista alhaalta ylös työlästä.

Tässä oppaassa toteutamme Vue 3:n avulla rullaavan ylös -painikkeen – askel askeleelta. Uudelleenkäytettävän komponentin rinnalle rakennamme uutissovelluksen, joka tarjoaa tuoreet uutiset eri lähteistä. News API.

Projektin asennus

Vue.JS-kehyksen käytön aloittaminen on helppoa sisällyttämällä JavaScript-tiedosto HTML-tiedostoon. Mutta todellisessa ja laajamittaisessa sovelluksessa vue-cli on paras tapa aloittaa! Käytämme vue-cli tämän päivän opetusohjelmassamme.

Luodaan projekti ja nimetään se vue-scroll-to-top, käyttämällä alla olevaa komentoa:

$ vue create vue-scroll-to-top

Tämä luo mallin projektimme rakentamisen aloittamiseksi. Voit aloittaa hakemuksen siirtymällä projektiin:

$ cd vue-scroll-to-top

Ja serve se langalla tai NPM:llä:

$ yarn serve

Tai:

$ npm run serve

On localhost, satamassa 8080 – hakemuksesi toimitetaan:

Komponenttien rakentaminen

Kun malli on käännetty ylös – voimme alkaa rakentaa uudelleen käytettävää rullaa ylös -komponenttia, joka yleistyy kaikkiin sovelluksiin, jotka haluat rakentaa. Ennen kuin määrität komponentin, valmistetaan ja puhdistetaan se App.vue käynnistin, jonka olemme luoneet Vue CLI:llä.

Vue-projektin puhdistus

Alle src/App.vue, rekisteröimme pian tulevan komponentin nimellä AppButton:

<template>
	<section class="app-container">
		<AppButton />
	</section>
</template>

<script>
import AppButton from "./components/AppButton.vue";

export default {
	name: "App",

	components: {
		AppButton
	},

	setup() {
		return {};
	}
};
</script>

<style>
@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font: inherit;
}
html {
	font-family: "Nunito", sans-serif;
}
body {
	font-size: 15px;
	color: #000000;
	background: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	color: #000000;
}
img {
	max-width: 100%;
}
ul {
	list-style: none;
}
a {
	text-decoration: none;
	display: inline-block;
}
.app-container {
	max-width: 82rem;
	margin: auto;
	padding: 3rem 1rem;
}
</style>

Button-käyttöliittymän rakentaminen

Painikkeen (ja uutisten) näyttävän sivun avulla voimme aloittaa komponenttien rakentamisen. Aloitetaan painikkeesta!

In components kansio, luo AppButton.vue tiedosto. Painikkeessa on kuvake, joka tarkoittaa nuoli ylöspäin visuaalisesti välittää toiminnallisuutta. Itse kuvakkeessa käytämme kuvakekirjastoa nimeltä Font Awesome jossa on yli 19.000 6 kuvaketta yli XNUMX tyylistä ja brändistä, vaikka tämä voidaan korvata yksinkertaisella caret-merkillä (^), mukautettu kuvake tai kuvake muista kirjastoista, jos et halua ottaa käyttöön toista riippuvuutta.

Asenna haluamasi riippuvuushallinnan avulla ydinpaketti, joka sisältää kaikki apuohjelmat, jotta kuvakkeet toimivat:

$ yarn add @fortawesome/fontawesome-svg-core
# Or
$ npm i --save @fortawesome/fontawesome-svg-core

Seuraavaksi asennamme ilmaiset kiinteät SVG-kuvakkeet (yksi useista käytettävissä olevista "joukoista" tai tyyleistä) käyttämällä seuraavaa komentoa:

$ yarn add @fortawesome/free-solid-svg-icons
# Or
$ npm i --save @fortawesome/free-solid-svg-icons

Ja lopuksi asennamme Font Awesome Vue Component Vue 3:lle käyttämällä seuraavaa komentoa:

$ yarn add @fortawesome/[email protected]
# Or
$ npm i --save @fortawesome/[email protected]

Ennen kuin voimme renderöidä kuvakkeen painikkeessamme, meidän on tuotava asennetut Font Awesome -riippuvuudet projektiimme, mukaan lukien tietty kuvakkeen nimi, jota haluamme käyttää. Päivitetäänpä main.js tiedosto:

import { createApp } from 'vue'
import App from './App.vue'


import { library } from '@fortawesome/fontawesome-svg-core'

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

import { faArrowUp } from '@fortawesome/free-solid-svg-icons'

library.add(faArrowUp)

createApp(App).component('font-awesome-icon', FontAwesomeIcon).mount('#app')

Voimme nyt kutsua nuoli ylös -kuvaketta nimellä faArrowUpsisään AppButton.vue renderöimään sen käyttöliittymässä! Voimme myös muotoilla painikkeen komponenttitiedostosta:

<template>
  <button class="app-button">
    <font-awesome-icon icon="fa-solid fa-arrow-up" />
  </button>
</template>

<style scoped>
.app-button {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  padding: 4px;
  box-shadow: 2px 2px #e9e9e9;
  cursor: pointer;
  position: fixed;
  right: 40px;
  bottom: 40px;
}
</style>

DOM:ssa ylös vieritettävän painikkeen pitäisi näyttää tältä, kun avaat sovelluksesi localhost:8080:

Uutissyötteiden käyttöliittymän rakentaminen

Jos haluat luoda ympäristön, jossa käyttäjä saattaa haluta käyttää painiketta manuaalisen vierityksen sijaan – haetaan paljon uutissisältöä ilmaisesta News API:sta. Noutopyyntöjen tekemiseen hyödynnämme axios paketti.

Jos sinulla ei ole sitä vielä asennettuna, voit tehdä sen Lankan tai NPM:n kautta:

$ yarn add axios
# Or
$ npm install axios

Uutissovellusliittymän käyttäminen edellyttää rekisteröitymistä tili – hankkia API-avain, joka on ilmainen kehitysympäristöihin. Tätä demoa varten pidämme asiat yksinkertaisina hakemalla kaikki artikkelit esimerkiksi Bitcoinista. Vuonna components luomme uuden tiedoston nimeltä NewsList.vue. sisään NewsList.vue, rakennamme luettelon Bitcoin-uutisartikkeleista, jotka saisimme vastauksena API:lta.

NewsList.vue pitäisi nyt sisältää seuraavat koodit:

<template>
  <section>
    <ul class="news-list">
      <li class="news-card" v-for="newsItem in newsList" :key="newsItem.id">
        <p><span class="heading">Title</span>: {{ newsItem.title }}</p>
        <p><span class="heading">Author</span>: {{ newsItem.author }}</p>
        <p>
          <span class="heading">Description</span>: {{ newsItem.description }}
        </p>
        <p><span class="heading">Source</span>: {{ newsItem.source.name }}</p>
      </li>
    </ul>
  </section>
</template>

<script>
import axios from "axios";
import { onMounted, ref } from "vue";

export default {
  name: "NewsList",
  setup() {
    const newsList = ref([]);

    const fetchNews = () => {
      axios
        .get(
          "https://newsapi.org/v2/everything?q=bitcoin&apiKey=94585b39692e4ea6b372bea15abf7dcc"
        )
        .then((response) => (newsList.value = response.data.articles));
    };

    onMounted(() => {
      fetchNews();
    });

    return { newsList };
  },
};
</script>

<style scoped>
ul.news-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
ul li.news-card {
  padding: 10px;
  display: flex;
  border-radius: 8px;
  flex-direction: column;
  row-gap: 5px;
  box-shadow: 0px 4px 12px -1px rgba(120,116,120,0.79);
}
li p span.heading {
  font-weight: 600;
  font-size: 18;
}
</style>

Sitten varmistamme päivittämisen App.vue, jotta uutisartikkeliluettelo voidaan näyttää:

<template>
  <section class="app-container">
    <AppButton />
    <NewsList />
  </section>
</template>

<script>
import AppButton from "./components/AppButton.vue";
import NewsList from "./components/NewsList.vue";
export default {
  name: "App",
  components: {
    AppButton,
    NewsList,
  },
  setup() {
    return{}
  }
};
</script>

<style>
@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font: inherit;
}
html {
  font-family: "Nunito", sans-serif;
}
body {
  font-size: 15px;
  color: #000000;
  background: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #000000;
}
img {
  max-width: 100%;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  display: inline-block;
}
.app-container {
  max-width: 82rem;
  margin: auto;
  padding: 3rem 1rem;
}
</style>

Yleensä – haluat sivuuttaa tulokset sen sijaan, että ne kasautuisivat. Luomme kuitenkin nimenomaan tapauksen, jossa vierittäminen ylös on hyödyllinen.

Näytä/piilota Scroll to Top -painike vierityskuuntelijalla

Osana käyttäjän mukaansatempaavaa kokemusta huolehditaan siitä, että rullaa ylös -painike tulee näkyviin vasta, kun käyttäjä alkaa vierittää sivua alaspäin.

Tämän saavuttamiseksi meidän on kuunneltava vieritystapahtumaa kohdassa, jossa käyttäjä vierittää sivua alaspäin.

Kohdista ensin painikeelementti asettamalla sille viite. Sitten hyödynnämme beforeUnmount() elinkaarikoukut painikkeen lisäämiseen ja poistamiseen DOM:sta vierityskuuntelijan avulla – vierittäessä sivua alaspäin tai sivun ylimpään. Voimme myös tarkistaa, onko käyttäjä sivun yläosassa, jos window.scrollY on suurempi kuin 0. Tällä voimme vaihtaa painikkeen näkyvyyttä tarpeen mukaan.

Päivitetään AppButton.vue komponentti painikkeen näyttämiseksi tai piilottamiseksi sen mukaan, kuinka pitkälle käyttäjä on vierinyt:

<template>
  <button ref="appButton" class="app-button">
    <font-awesome-icon icon="fa-solid fa-arrow-up" />
  </button>
</template>

<script>
import { onMounted, ref, onBeforeMount } from "vue";
export default {
  name: "AppButton",
  setup() {
    const appButton = ref();
    const userScroll = () => {
      if (window.scrollY > 0) {
        appButton.value.classList.add("showButton");
        console.log('scrolled');
      } else {
        appButton.value.classList.remove("showButton");
        console.log('top');
      }
    };
    onMounted(() => {
      window.addEventListener("scroll", userScroll);
    });
    onBeforeMount(() => {
      window.removeEventListener("scroll", userScroll);
    });
    return { appButton };
  },
};
</script>

<style scoped>
.app-button {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  padding: 4px;
  box-shadow: 2px 2px #e9e9e9;
  cursor: pointer;
  position: fixed;
  bottom: 40px;
  display: none;
  right: 40px;
}

.showButton {
  display: block;
}
</style>

Toteutetaan Scroll-tapahtumaa

Tässä vaiheessa meidän on vain saatava painike vierimään sivun yläosaan, kun käyttäjä napsauttaa sitä. Tämän saavuttamiseksi luodaan a scrollToTop() menetelmä AppButton.vue. Tämä on menetelmä, jota käyttäisimme milloin window.scrollY = 0. Nyt, kun scrollToTop() -menetelmää kutsutaan, sivumme rullaa sujuvasti ylimpään osioon, ja myös scroll-top-top-painike katoaa:

const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
};

Kun tämä koodinpätkä lisätään AppButton.vue, huomaat, että olemme onnistuneesti ottaneet käyttöön Vue-sovelluksessamme rullaa ylös -toiminnon, jonka voimme liittää kaikkiin projekteihin, joissa tarvitsemme samaa.

Yhteenveto

Onnittelut, että olet seurannut loppuun asti! 🔥

Tässä opetusohjelmassa tarkastelimme, kuinka Vue-sovellukseen rakennetaan ylös vieritystoiminto. Tämä on uudelleenkäytettävä yleinen komponentti ja se voidaan helposti ottaa käyttöön myös muissa projekteissa.

Merkitykselliset resurssit