Pomaknite se na vrh v Vue s komponentami za večkratno uporabo

Za izboljšanje uporabniške izkušnje na katerem koli spletnem mestu z veliko vsebine na svojih spletnih straneh je običajno, da razvijalci sprednjega dela implementirajo funkcijo drsenja na vrh prek gumba, da naredijo stvari prijetnejše in priročnejše za uporabnike.

Čeprav lahko uporabniki uporabljajo ukaz + puščica navzgor na tipkovnici, je pomembno upoštevati tudi to potencialno več kot polovica vaših uporabnikov morda uporabljajo mobilne naprave in med brskanjem po vašem spletnem mestu ne bodo uporabljali tipkovnice, povezane s svojim telefonom. Manjši zasloni pogosto zahtevajo tudi več drsenja, zaradi česar je navigacija od spodaj navzgor težavna.

V tem priročniku bomo implementirali gumb za pomikanje na vrh z uporabo Vue 3 – korak za korakom. Poleg komponente za večkratno uporabo bomo izdelali aplikacijo za novice, ki bo zagotavljala najnovejše novice iz različnih virov z API za novice.

Nastavitev projekta

Začetek uporabe ogrodja Vue.JS je preprost, saj v datoteko HTML vključite datoteko JavaScript. Toda za uporabo v resničnem svetu in v velikem obsegu je vue-cli je najboljši način za začetek! Uporabili bomo vue-cli v naši današnji vadnici.

Ustvarimo projekt in ga poimenujmo vue-scroll-to-top, z uporabo spodnjega ukaza:

$ vue create vue-scroll-to-top

To ustvari predlogo za začetek gradnje našega projekta. Aplikacijo lahko zaženete tako, da se premaknete v projekt:

$ cd vue-scroll-to-top

in serve to s prejo ali NPM:

$ yarn serve

ali pa:

$ npm run serve

On localhost, v pristanišču 8080 – vaša prijava bo vročena:

Gradnja komponent

Ko je predloga pripravljena – lahko začnemo graditi komponento za večkratno uporabo s pomikom na vrh, ki posplošuje katero koli aplikacijo, ki jo želite zgraditi. Preden definiramo komponento, jo pripravimo in očistimo App.vue začetnik, ki smo ga ustvarili z Vue CLI.

Čiščenje projekta Vue

Pod src/App.vue, bomo bodočo komponento registrirali kot 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>

Izdelava uporabniškega vmesnika gumba

S stranjo, ki bo prikazala gumb (in novice), lahko začnemo graditi komponente. Začnimo z gumbom!

v components mapo, ustvarite AppButton.vue mapa. V gumb bomo vključili ikono, ki označuje puščica navzgor za vizualni prenos funkcionalnosti. Za samo ikono bomo uporabili knjižnico ikon, imenovano Font Awesome ki ima več kot 19.000 ikon v 6 stilih in blagovnih znamkah, čeprav je to mogoče nadomestiti s preprostim znakom kazalke (^), ikono po meri ali ikono iz drugih knjižnic, če ne želite uvesti druge odvisnosti.

Z uporabo želenega upravitelja odvisnosti namestite osnovni paket, ki vsebuje vse pripomočke za delovanje ikon:

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

Nato bomo namestili brezplačne trdne ikone SVG (enega od več razpoložljivih »naborov« ali slogov), z uporabo naslednjega ukaza:

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

In nazadnje, namestili bomo Komponenta pisave Awesome Vue za Vue 3 z naslednjim ukazom:

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

Preden lahko upodobimo svojo ikono v našem gumbu, moramo uvoziti nameščene odvisnosti Font Awesome v naš projekt, vključno z določenim imenom ikone, ki ga želimo uporabiti. Posodobimo main.js datoteka:

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

Zdaj lahko imenujemo ikono puščice navzgor kot faArrowUpv AppButton.vue da ga upodabljate v uporabniškem vmesniku! Gumb lahko oblikujemo tudi iz komponente komponente:

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

V DOM-u bi moral biti naš gumb za pomikanje na vrh videti takole, ko odprete aplikacijo na localhost:8080:

Izdelava uporabniškega vmesnika virov novic

Če želite ustvariti okolje, v katerem bo uporabnik morda želel uporabiti gumb namesto ročnega pomikanja – pridobimo veliko vsebine novic iz brezplačnega API-ja za novice. Za pošiljanje zahtevkov za pridobivanje bomo izkoristili axios paket.

Če ga še nimate nameščenega, lahko to storite prek Yarn ali NPM:

$ yarn add axios
# Or
$ npm install axios

Če želite uporabljati News API, se morate registrirati račun – pridobiti ključ API, ki je brezplačen za razvojna okolja. Za to predstavitev bomo stvari poenostavili, tako da bomo samo pridobili vse članke o, recimo, Bitcoinu. V components mapo, ustvarimo novo datoteko z imenom NewsList.vue. v NewsList.vue, bomo sestavili seznam člankov z novicami o bitcoinih, ki jih bomo prejeli kot odgovor API-ja.

NewsList.vue mora zdaj vključevati naslednje kode:

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

Nato poskrbimo za posodobitev App.vue, tako da se lahko prikaže seznam novic:

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

Običajno – želeli bi paginirati rezultate, namesto da bi se kopičili. Vendar pa izrecno ustvarjamo primer, v katerem je uporaben drsnik na vrh.

Pokaži/skrij gumb za pomikanje na vrh s poslušalcem pomika

Kot del privlačne izkušnje za uporabnika poskrbimo, da se gumb za pomikanje na vrh prikaže šele, ko se uporabnik začne pomikati navzdol po strani.

Da bi to dosegli, moramo poslušati dogodek drsenja na točki, ko se uporabnik pomakne navzdol po strani.

Najprej ciljajmo na element gumba tako, da mu nastavimo sklic. Nato uporabimo beforeUnmount() kljukice življenjskega cikla za dodajanje in odstranjevanje gumba iz DOM s pomočjo poslušalca drsenja – ob drsenju navzdol po strani ali na skrajni vrh strani. Prav tako lahko preverimo, ali je uporabnik na vrhu strani, če window.scrollY je večji od 0. S tem lahko preklopimo vidnost gumba, kjer je to potrebno.

Posodobimo AppButton.vue komponenta za prikaz ali skrivanje gumba glede na to, kako daleč se je uporabnik pomaknil:

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

Implementacija Scroll Event

Na tej točki nam preostane, da se gumb dejansko pomakne na vrh strani, ko ga uporabnik klikne. Da bi to dosegli, ustvarimo a scrollToTop() metoda v AppButton.vue. To je metoda, ki bi jo uporabili, ko window.scrollY = 0. Zdaj, ko je scrollToTop() se pokliče metoda, se naša stran gladko pomakne na najvišji del in tudi gumb za pomikanje na vrhu na vrhu izgine:

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

Ko je ta delček kode dodan v AppButton.vue, boste ugotovili, da smo v naši aplikaciji Vue uspešno implementirali funkcijo drsenja na vrh, ki jo lahko vključimo v kateri koli projekt, kjer to potrebujemo.

zaključek

Čestitke za spremljanje do konca! 🔥

V tej vadnici smo pogledali, kako v aplikacijo Vue vgraditi funkcijo drsenja na vrh. To je generična komponenta za večkratno uporabo in jo je mogoče zlahka uvesti tudi v druge projekte.

Pomembni viri