Για τη βελτίωση της εμπειρίας χρήστη σε οποιονδήποτε ιστότοπο με πολύ περιεχόμενο στις ιστοσελίδες του, είναι σύνηθες για τους προγραμματιστές frontend να εφαρμόζουν μια λειτουργία κύλισης προς την κορυφή μέσω ενός κουμπιού, για να κάνουν τα πράγματα πιο ευχάριστα και βολικά για τους χρήστες.

Ενώ οι χρήστες μπορούν να χρησιμοποιήσουν την εντολή + επάνω βέλος σε ένα πληκτρολόγιο, είναι επίσης σημαντικό να λάβουν υπόψη ότι δυνητικά περισσότεροι από τους μισούς χρήστες σας μπορεί να χρησιμοποιεί κινητές συσκευές και δεν θα χρησιμοποιεί πληκτρολόγιο συνδεδεμένο στο τηλέφωνό του κατά την κύλιση στον ιστότοπό σας. Οι μικρότερες οθόνες συχνά απαιτούν επίσης περισσότερη κύλιση, καθιστώντας την πλοήγηση από κάτω προς τα πάνω επίπονη.

Σε αυτόν τον οδηγό, θα εφαρμόσουμε ένα κουμπί κύλισης προς την κορυφή χρησιμοποιώντας το Vue 3 – βήμα προς βήμα. Παράλληλα με το επαναχρησιμοποιήσιμο στοιχείο, θα δημιουργήσουμε μια εφαρμογή ειδήσεων που παρέχει έκτακτες ειδήσεις από διάφορες πηγές με News API.

Ρύθμιση έργου

Το ξεκίνημα με το πλαίσιο Vue.JS είναι απλό, καθώς περιλαμβάνει ένα αρχείο JavaScript σε ένα αρχείο HTML. Αλλά για μια εφαρμογή πραγματικού κόσμου και μεγάλης κλίμακας, το vue-cli είναι ο καλύτερος τρόπος για να ξεκινήσετε! Θα χρησιμοποιήσουμε το vue-cli στο μάθημά μας σήμερα.

Ας δημιουργήσουμε το έργο και ας το ονομάσουμε vue-scroll-to-top, χρησιμοποιώντας την παρακάτω εντολή:

$ vue create vue-scroll-to-top

Αυτό δημιουργεί ένα πρότυπο για να ξεκινήσει η κατασκευή του έργου μας. Μπορείτε να ξεκινήσετε την εφαρμογή μεταβαίνοντας στο έργο:

$ cd vue-scroll-to-top

Και serve αυτό με Νήματα ή NPM:

$ yarn serve

Ή:

$ npm run serve

On localhost, στο λιμάνι 8080 – η αίτησή σας θα επιδοθεί:

Κατασκευή των εξαρτημάτων

Με το πρότυπο περιστρεφόμενο – μπορούμε να ξεκινήσουμε τη δημιουργία του επαναχρησιμοποιήσιμου στοιχείου κύλισης προς την κορυφή, το οποίο γενικεύεται σε οποιαδήποτε εφαρμογή θέλετε να δημιουργήσετε. Πριν ορίσουμε το στοιχείο, ας προετοιμάσουμε και ας το καθαρίσουμε App.vue starter που δημιουργήσαμε με το Vue CLI.

Καθαρισμός του έργου Vue

Κάτω από src/App.vue, θα καταχωρήσουμε το συνιστώσα που θα είναι σύντομα ως 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>

Δημιουργία της διεπαφής χρήστη του κουμπιού

Με τη σελίδα που θα εμφανίζει το κουμπί (και ειδήσεις) – μπορούμε να ξεκινήσουμε τη δημιουργία των στοιχείων. Ας ξεκινήσουμε με το κουμπί!

Στο components φάκελο, δημιουργήστε ένα AppButton.vue αρχείο. Στο κουμπί, θα συμπεριλάβουμε ένα εικονίδιο που υποδηλώνει το επάνω βέλος για να αποδώσει οπτικά τη λειτουργικότητα. Για το ίδιο το εικονίδιο, θα χρησιμοποιήσουμε μια βιβλιοθήκη εικονιδίων που ονομάζεται Font Awesome που έχει πάνω από 19.000 εικονίδια πάνω από 6 στυλ και επωνυμίες, αν και αυτό μπορεί να αντικατασταθεί με ένα απλό σημάδι καρέ (^), ένα προσαρμοσμένο εικονίδιο ή ένα εικονίδιο από άλλες βιβλιοθήκες εάν δεν θέλετε να εισαγάγετε άλλη εξάρτηση.

Χρησιμοποιώντας τον διαχειριστή εξαρτήσεων που προτιμάτε, εγκαταστήστε το βασικό πακέτο που περιέχει όλα τα βοηθητικά προγράμματα για να λειτουργήσουν τα εικονίδια:

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

Στη συνέχεια, θα εγκαταστήσουμε το δωρεάν στερεά εικονίδια SVG (ένα από τα πολλαπλά διαθέσιμα «σύνολα» ή στυλ), χρησιμοποιώντας την ακόλουθη εντολή:

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

Και τέλος, θα εγκαταστήσουμε το Font Awesome Vue Component για το Vue 3, χρησιμοποιώντας την ακόλουθη εντολή:

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

Για να μπορέσουμε να αποδώσουμε το εικονίδιο μας στο κουμπί μας, πρέπει να εισαγάγουμε τις εγκατεστημένες εξαρτήσεις Font Awesome στο έργο μας, συμπεριλαμβανομένου του συγκεκριμένου ονόματος εικονιδίου που θέλουμε να χρησιμοποιήσουμε. Ας ενημερώσουμε το main.js αρχείο:

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

Μπορούμε τώρα να ονομάσουμε το εικονίδιο με το βέλος, ως faArrowUpσε AppButton.vue για να το αποδώσετε στο UI! Μπορούμε επίσης να διαμορφώσουμε το κουμπί από το αρχείο συστατικού:

<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, το κουμπί κύλισης προς τα πάνω θα πρέπει να μοιάζει με αυτό, όταν ανοίγετε την εφαρμογή σας localhost:8080:

Δημιουργία της διεπαφής χρήστη News Feeds

Για να δημιουργήσετε ένα περιβάλλον στο οποίο ένας χρήστης μπορεί να θέλει να χρησιμοποιήσει το κουμπί, αντί να κάνει χειροκίνητη κύλιση – ας πάρουμε πολύ περιεχόμενο ειδήσεων από το δωρεάν API Ειδήσεων. Για την υποβολή αιτημάτων ανάκτησης, θα εκμεταλλευτούμε το axios πακέτο.

Εάν δεν το έχετε ήδη εγκαταστήσει, μπορείτε να το κάνετε μέσω Yarn ή NPM:

$ yarn add axios
# Or
$ npm install axios

Για να χρησιμοποιήσετε το API Ειδήσεων, θα πρέπει να καταχωρήσετε ένα λογαριασμός – για να αποκτήσετε ένα κλειδί API που είναι δωρεάν για περιβάλλοντα ανάπτυξης. Για αυτήν την επίδειξη, θα κρατήσουμε τα πράγματα απλά, φέρνοντας απλώς όλα τα άρθρα για, ας πούμε, το Bitcoin. Στο components φάκελο, ας δημιουργήσουμε ένα νέο αρχείο που ονομάζεται NewsList.vue. σε NewsList.vue, θα δημιουργήσουμε μια λίστα με άρθρα ειδήσεων Bitcoin που θα λάβουμε ως απάντηση από το API.

NewsList.vue θα πρέπει τώρα να περιλαμβάνει τους ακόλουθους κωδικούς:

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

Στη συνέχεια, φροντίζουμε να ενημερώνουμε App.vue, ώστε να εμφανίζεται η λίστα με τα άρθρα ειδήσεων:

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

Συνήθως – θα θέλατε να σελιδοποιήσετε τα αποτελέσματα, αντί να τα έχετε στοίβα. Ωστόσο, δημιουργούμε συγκεκριμένα μια περίπτωση στην οποία είναι χρήσιμη η κύλιση προς την κορυφή.

Εμφάνιση/Απόκρυψη κουμπιού κύλισης στην κορυφή με χρήση του προγράμματος ακρόασης κύλισης

Ως μέρος μιας ελκυστικής εμπειρίας για τον χρήστη, ας βεβαιωθούμε ότι το κουμπί κύλισης προς τα πάνω αποκαλύπτεται μόνο όταν ο χρήστης αρχίσει να κάνει κύλιση προς τα κάτω στη σελίδα.

Για να το πετύχουμε αυτό, πρέπει να ακούσουμε το συμβάν κύλισης στο σημείο που ένας χρήστης κάνει κύλιση προς τα κάτω στη σελίδα.

Αρχικά, ας στοχεύσουμε το στοιχείο του κουμπιού ορίζοντας μια αναφορά σε αυτό. Στη συνέχεια, κάνουμε χρήση του beforeUnmount() Άγκιστρα κύκλου ζωής για να προσθέσετε και να αφαιρέσετε το κουμπί από το DOM, με τη βοήθεια του προγράμματος ακρόασης κύλισης – κατά την κύλιση προς τα κάτω ή στο επάνω μέρος της σελίδας. Μπορούμε επίσης να ελέγξουμε αν κάποιος χρήστης βρίσκεται στην κορυφή της σελίδας if window.scrollY είναι μεγαλύτερο από 0. Με αυτό, μπορούμε να αλλάξουμε την ορατότητα του κουμπιού, όπου χρειάζεται.

Ας ενημερώσουμε το AppButton.vue στοιχείο για εμφάνιση ή απόκρυψη του κουμπιού με βάση την απόσταση που έχει κάνει κύλιση ο χρήστης:

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

Υλοποίηση συμβάντος κύλισης

Αυτό που μας μένει σε αυτό το σημείο είναι να κάνουμε το κουμπί να κάνει κύλιση στην κορυφή της σελίδας όταν ένας χρήστης κάνει κλικ σε αυτό. Για να το πετύχουμε αυτό, ας δημιουργήσουμε ένα scrollToTop() μέθοδος στο AppButton.vue. Αυτή είναι μια μέθοδος που θα χρησιμοποιούσαμε όταν window.scrollY = 0. Τώρα, όταν το scrollToTop() καλείται η μέθοδος, η σελίδα μας μετακινείται ομαλά στο ανώτατο τμήμα και το κουμπί κύλισης στην κορυφή της κορυφής εξαφανίζεται επίσης:

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

Όταν προστεθεί αυτό το απόσπασμα κώδικα AppButton.vue, θα διαπιστώσετε ότι έχουμε εφαρμόσει με επιτυχία μια λειτουργία κύλισης προς την κορυφή στην εφαρμογή μας Vue την οποία μπορούμε να συνδέσουμε σε οποιοδήποτε έργο το χρειαζόμαστε.

Συμπέρασμα

Συγχαρητήρια για την παρακολούθηση μέχρι το τέλος! 🔥

Σε αυτό το σεμινάριο, εξετάσαμε πώς να δημιουργήσουμε μια λειτουργία κύλισης προς την κορυφή σε μια εφαρμογή Vue. Αυτό είναι ένα επαναχρησιμοποιήσιμο γενικό εξάρτημα και μπορεί εύκολα να εισαχθεί και σε άλλα έργα.

Σχετικοί πόροι