Scroll To Top In Vue With Reusable Components

Taasavaldanud Platon

järgijaid: 0

Kasutajakogemuse parandamisel mis tahes veebisaidil, mille veebilehtedel on palju sisu, on tavaline, et kasutajaliidese arendajad rakendavad nupu kaudu üles kerimise funktsiooni, et muuta asjad kasutajatele nauditavamaks ja mugavamaks.

Kuigi kasutajad saavad klaviatuuril kasutada käsku + ülesnoolt, on oluline ka seda meeles pidada rohkem kui pooled teie kasutajatest võivad kasutada mobiilseadmeid ega kasuta teie veebisaidil sirvimise ajal telefoniga ühendatud klaviatuuri. Väiksemad ekraanid nõuavad sageli ka rohkem kerimist, muutes navigeerimise alt ülespoole töömahukaks.

Selles juhendis rakendame Vue 3 abil samm-sammult üles kerimise nuppu. Lisaks korduvkasutatavale komponendile loome uudisterakenduse, mis pakub erinevatest allikatest värskeid uudiseid. Uudiste API.

Lähtekood: Nagu tavaliselt, saate sellel hostitud lähtekoodi kallal nokitseda GitHub.

Projekti seadistamine

Vue.JS-i raamistikuga alustamine on lihtne, lisades JavaScripti faili HTML-faili. Kuid tegeliku ja suuremahulise rakenduse jaoks vue-cli on parim viis alustamiseks! Me kasutame vue-cli meie tänases õpetuses.

Loome projekti ja paneme sellele nime vue-scroll-to-top, kasutades allolevat käsku:

$ vue create vue-scroll-to-top

See loob malli meie projekti ehitamise alustamiseks. Rakenduse saate käivitada, liikudes projekti:

$ cd vue-scroll-to-top

And serve see lõnga või NPM-iga:

$ yarn serve

Või:

$ npm run serve

On localhost, sadamas 8080 – teie taotlus toimetatakse kätte:

Kerige korduvkasutatavate komponentidega PlatoBlockchain Data Intelligence'iga Vue's üles. Vertikaalne otsing. Ai.

Komponentide ehitamine

Kui mall on üles ehitatud, saame hakata looma korduvkasutatavat üleskeritavat komponenti, mis üldistab kõiki rakendusi, mida soovite luua. Enne komponendi määratlemist valmistame ette ja puhastame App.vue käivitaja, mille oleme loonud Vue CLI-ga.

Vue projekti puhastamine

alla src/App.vue, registreerime peagi valmiva komponendi nimega 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>

Nupu kasutajaliidese loomine

Lehega, kus kuvatakse nupp (ja uudised), saame hakata komponente ehitama. Alustame nupust!

aasta components kaust, looge an AppButton.vue faili. Lisame nupule ikooni, mis tähistab nool üles funktsionaalsuse visuaalseks edastamiseks. Ikooni enda jaoks kasutame ikooniteeki nimega Font Awesome millel on üle 19.000 6 ikooni üle XNUMX stiili ja kaubamärgi, kuigi selle saab asendada lihtsa caret märgiga (^), kohandatud ikoon või ikoon teistest teegidest, kui te ei soovi uut sõltuvust tutvustada.

Installige oma eelistatud sõltuvushalduri abil põhipakett, mis sisaldab kõiki ikoonide töötamiseks vajalikke utiliite.

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

Järgmisena installime tasuta kindlad SVG-ikoonid (üks mitmest saadaolevast komplektist või stiilist), kasutades järgmist käsku:

Tutvuge meie praktilise ja praktilise Giti õppimise juhendiga, mis sisaldab parimaid tavasid, tööstusharus aktsepteeritud standardeid ja kaasas olevat petulehte. Lõpetage Giti käskude guugeldamine ja tegelikult õppima seda!

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

Ja lõpuks paigaldame Font Awesome Vue komponent Vue 3 jaoks, kasutades järgmist käsku:

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

Enne kui saame oma ikooni oma nupus renderdada, peame importima installitud Font Awesome'i sõltuvused oma projekti, sealhulgas konkreetse ikooni nime, mida soovime kasutada. Värskendame main.js faili:

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')

Nüüd saame kutsuda üles nooleikooni kui faArrowUpsisse AppButton.vue selle kasutajaliideses renderdamiseks! Samuti saame nupu stiilida komponendifailist:

<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-is peaks meie üleskerimise nupp välja nägema selline, kui avate rakenduse sisse localhost:8080:

pilt

Uudistevoogude kasutajaliidese loomine

Et luua keskkond, kus kasutaja võib-olla soovib seda nuppu kasutada, mitte käsitsi kerida – toome tasuta uudiste API-st palju uudiste sisu. Tootmistaotluste esitamiseks kasutame ära axios pakendis.

Kui teil pole seda veel installitud, saate seda teha lõnga või NPM-i kaudu:

$ yarn add axios
# Or
$ npm install axios

Newsi API kasutamiseks peate registreerima konto – hankida API-võti, mis on arenduskeskkondade jaoks tasuta. Selle demo jaoks hoiame asjad lihtsad, laadides lihtsalt kõik artiklid näiteks Bitcoini kohta. Aastal components kausta, loome uue faili nimega NewsList.vue. sisse NewsList.vuekoostame nimekirja Bitcoini uudisteartiklitest, mille saaksime vastusena API-lt.

NewsList.vue peaks nüüd sisaldama järgmisi koode:

<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>

Seejärel värskendame kindlasti App.vue, et kuvada uudisteartiklite loend:

<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>

Tavaliselt soovite tulemusi lehekülgede korrastada, selle asemel, et neid kuhjuda. Kuid me loome konkreetselt juhtumi, kus üles kerimine on kasulik.

Kuva/peida kerimisnupp Kerimisnuppu kasutades kerimiskuulajat

Kasutaja jaoks köitva kogemuse osana jälgime, et üles kerimise nupp ilmuks alles siis, kui kasutaja hakkab lehte alla kerima.

Selle saavutamiseks peame kuulama kerimissündmust kohas, kus kasutaja lehte alla kerib.

Esmalt sihime nupu elemendi, määrates sellele viite. Seejärel kasutame beforeUnmount() elutsükli konksud nupu lisamiseks ja eemaldamiseks DOM-ist kerimiskuulaja abil – lehe alla kerimisel või lehe ülaossa. Samuti saame kontrollida, kas kasutaja on lehe ülaosas, kui window.scrollY on suurem kui 0. Selle abil saame nupu nähtavust vajaduse korral ümber lülitada.

Värskendame AppButton.vue komponent nupu kuvamiseks või peitmiseks vastavalt sellele, kui kaugele kasutaja on kerinud:

<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>

Kerimissündmuse rakendamine

Meil jääb praegu üle vaid panna nupp lehe ülaossa kerima, kui kasutaja sellel klõpsab. Selle saavutamiseks loome a scrollToTop() meetod AppButton.vue. See on meetod, mida me kasutaksime millal window.scrollY = 0. Nüüd, kui scrollToTop() meetodit kutsutakse, meie leht kerib sujuvalt ülemisse ossa ja kaob ka üleval kerimise nupp:


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

Kui see koodijupp lisatakse AppButton.vue, avastate, et oleme oma Vue rakenduses edukalt juurutanud üleskerimise funktsiooni, mille saame ühendada mis tahes projektiga, kus vajame sama.

Järeldus

Õnnitleme teid lõpuni jälgimise puhul! 🔥

Selles õpetuses vaatlesime, kuidas luua Vue rakendusse üles kerimise funktsioon. See on korduvkasutatav üldine komponent ja seda saab hõlpsasti kasutusele võtta ka teistes projektides.