Scroll To Top In Vue With Reusable Components

Újra kiadta Platón

Követő: 0

A sok tartalommal rendelkező webhely felhasználói élményének javítása során gyakori, hogy a frontend fejlesztők egy gombon keresztül hajtanak végre görgetést a tetejére, hogy élvezetesebbé és kényelmesebbé tegyék a dolgokat a felhasználók számára.

Bár a felhasználók használhatják a parancs + felfelé mutató nyilat a billentyűzeten, azt is fontos szem előtt tartani, hogy lehetséges felhasználóinak több mint fele lehet, hogy mobileszközöket használ, és nem a telefonjához csatlakoztatott billentyűzetet, miközben a webhelyen görget. A kisebb képernyők gyakran több görgetést tesznek szükségessé, ami fáradságossá teszi az alulról felfelé történő navigálást.

Ebben az útmutatóban egy görgetőgombot fogunk megvalósítani a Vue 3 segítségével – lépésről lépésre. Az újrafelhasználható komponens mellett egy híralkalmazást építünk, amely különféle forrásokból friss híreket közöl a News API.

Forráskód: Szokás szerint trükközhet a webhelyen tárolt forráskóddal GitHub.

Projekt beállítása

A Vue.JS keretrendszer használatának megkezdése egyszerű: JavaScript-fájlt kell beilleszteni egy HTML-fájlba. De egy valós és nagyszabású alkalmazáshoz a vue-cli ez a legjobb módja az indulásnak! Használjuk a vue-cli mai oktatóanyagunkban.

Hozzuk létre a projektet, és nevezzük el vue-scroll-to-top, az alábbi paranccsal:

$ vue create vue-scroll-to-top

Ez létrehoz egy sablont a projektünk felépítéséhez. Az alkalmazást a projektbe való belépéssel indíthatja el:

$ cd vue-scroll-to-top

És serve fonallal vagy NPM-mel:

$ yarn serve

Vagy:

$ npm run serve

On localhost, a kikötőben 8080 – kérelmét kézbesítjük:

Görgessen a tetejére a Vue újrafelhasználható összetevőivel PlatoBlockchain Data Intelligence segítségével. Függőleges keresés. Ai.

A komponensek felépítése

A felpörgetett sablonnal megkezdhetjük az újrafelhasználható görgetős komponens felépítését, amely általánosítható minden olyan alkalmazásra, amelyet fel szeretne építeni. A komponens meghatározása előtt készítsük elő és tisztítsuk meg a App.vue indító, amelyet a Vue CLI-vel hoztunk létre.

A Vue Project tisztítása

Alatt src/App.vue, a hamarosan megjelenő komponenst néven regisztráljuk 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>

A Gomb UI felépítése

A gombot (és híreket) megjelenítő oldallal elkezdhetjük a komponensek építését. Kezdjük a gombbal!

A components mappát, hozzon létre egy AppButton.vue fájlt. A gombban megjelenik egy ikon, amely a felfelé nyíl hogy vizuálisan közvetítse a funkcionalitást. Magához az ikonhoz egy ikonkönyvtárat fogunk használni Font Awesome amely több mint 19.000 ikonnal rendelkezik több mint 6 stílusban és márkában, bár ez helyettesíthető egy egyszerű caret jellel (^), egyéni ikon vagy más könyvtárak ikonja, ha nem szeretne újabb függőséget bevezetni.

Az előnyben részesített függőségkezelővel telepítse az alapcsomagot, amely tartalmazza az ikonok működéséhez szükséges összes segédprogramot:

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

Ezután telepítjük a ingyenes szilárd SVG ikonok (a több rendelkezésre álló „készlet” vagy stílus egyike), a következő paranccsal:

Tekintse meg gyakorlatias, gyakorlati útmutatónkat a Git tanulásához, amely tartalmazza a bevált gyakorlatokat, az iparág által elfogadott szabványokat és a mellékelt csalólapot. Hagyd abba a guglizást a Git parancsokkal, és valójában tanulni meg!

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

És végül telepítjük a Font Awesome Vue Component Vue 3 esetén a következő paranccsal:

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

Mielőtt megjeleníthetnénk ikonunkat a gombunkban, importálnunk kell a telepített Font Awesome függőségeket a projektünkbe, beleértve a használni kívánt ikon nevét is. Frissítsük a main.js file:

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

Most már hívhatjuk a felfelé mutató nyíl ikont, mint faArrowUp-ban AppButton.vue hogy megjelenítse a felhasználói felületen! A gombot stílusozhatjuk a komponensfájlból is:

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

A DOM-on a lap tetejére görgető gombunknak így kell kinéznie, amikor megnyitja az alkalmazást localhost:8080:

kép

A News Feeds UI felépítése

Olyan környezet létrehozásához, amelyben a felhasználó esetleg használni szeretné a gombot a kézi görgetés helyett – gyűjtsünk le sok hírtartalmat az ingyenes News API-ból. A letöltési kérelmek benyújtásához kihasználjuk a axios csomag.

Ha még nincs telepítve, megteheti a Yarn vagy az NPM segítségével:

$ yarn add axios
# Or
$ npm install axios

A News API használatához regisztrálnia kell egy fiók – fejlesztői környezetekhez ingyenes API-kulcs megszerzése. Ennél a demónál a dolgok egyszerűek maradnak, egyszerűen letöltjük az összes cikket, mondjuk a Bitcoinról. Ban,-ben components mappát, hozzunk létre egy új fájlt NewsList.vue. -ban NewsList.vue, elkészítjük a Bitcoin-hírek listáját, amelyeket válaszként kapunk az API-tól.

NewsList.vue most a következő kódokat kell tartalmaznia:

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

Ezután mindenképpen frissítjük App.vue, hogy a hírcikkek listája megjelenhessen:

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

Általában – az eredményeket lapozgatni szeretné, ahelyett, hogy felhalmozódnának. Mindazonáltal kifejezetten olyan esetet hozunk létre, amelyben hasznos a lap tetejére görgetés.

A Görgetés a tetejére gomb megjelenítése/elrejtése a Scroll Listener használatával

A felhasználó számára vonzó élmény részeként ügyeljünk arra, hogy a lap tetejére görgető gomb csak akkor jelenjen meg, amikor a felhasználó elkezd lefelé görgetni az oldalon.

Ennek eléréséhez meg kell hallgatnunk a görgetési eseményt, amikor a felhasználó lefelé görget az oldalon.

Először is célozzuk meg a gombelemet egy hivatkozás beállításával. Ezután felhasználjuk a beforeUnmount() életciklus-kampók a gomb hozzáadásához és eltávolításához a DOM-ból a görgetőfigyelő segítségével – az oldalon lefelé vagy az oldal tetejére görgetve. Azt is ellenőrizhetjük, hogy egy felhasználó az oldal tetején van-e, ha window.scrollY Ez nagyobb, mint 0. Ezzel a gomb láthatóságát ott tudjuk váltani, ahol kell.

Frissítsük a AppButton.vue komponens a gomb megjelenítéséhez vagy elrejtéséhez aszerint, hogy mennyit görgett a felhasználó:

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

Scroll Event megvalósítása

Most az maradt nekünk, hogy a gomb ténylegesen az oldal tetejére görgessen, amikor a felhasználó rákattint. Ennek eléréséhez hozzunk létre a scrollToTop() módszer be AppButton.vue. Ez egy olyan módszer, amelyet mikor hívnánk meg window.scrollY = 0. Most, amikor a scrollToTop() metódust hívják, oldalunk simán gördül a legfelső részig, és eltűnik a görgető tetejére gomb is:


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

Amikor ez a kódrészlet hozzáadódik AppButton.vue, látni fogja, hogy sikeresen megvalósítottunk egy görgetős funkciót a Vue alkalmazásunkban, amelyet bármilyen projekthez csatlakoztathatunk, ahol ugyanerre van szükségünk.

Következtetés

Gratulálok a követéshez a végéig! 🔥

Ebben az oktatóanyagban megvizsgáltuk, hogyan építhetünk fel görgetéses funkciót egy Vue-alkalmazásba. Ez egy újrafelhasználható általános komponens, és könnyen bevezethető más projektekben is.