גלול למעלה ב-Vue עם רכיבים לשימוש חוזר

בשיפור חווית המשתמש בכל אתר אינטרנט עם תוכן רב בדפי האינטרנט שלו, מקובל שמפתחי חזיתות מיישמים פונקציונליות של גלילה למעלה באמצעות כפתור, כדי להפוך את הדברים למהנים ונוחים יותר עבור המשתמשים.

בעוד שמשתמשים יכולים להשתמש בפקודה + חץ למעלה במקלדת, חשוב גם לזכור זאת יותר ממחצית מהמשתמשים שלך ייתכן שהם משתמשים במכשירים ניידים ולא ישתמשו במקלדת המחוברת לטלפון שלהם בזמן גלילה באתר שלך. מסכים קטנים יותר מצריכים לעתים קרובות יותר גלילה, מה שהופך את הניווט מלמטה למעלה לעמלני.

במדריך זה, ניישם כפתור גלילה למעלה באמצעות Vue 3 - צעד אחר צעד. לצד הרכיב לשימוש חוזר, נבנה אפליקציית חדשות המספקת חדשות מעולות ממקורות שונים עם חדשות 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 זה עם Yarn או NPM:

$ yarn serve

או:

$ npm run serve

On localhost, בנמל 8080 – הבקשה שלך תוגש:

בניית הרכיבים

כשהתבנית מסתובבת - נוכל להתחיל לבנות את רכיב הגלילה-למעלה הניתן לשימוש חוזר, שמכליל לכל אפליקציה שתרצה לבנות. לפני הגדרת הרכיב, בואו נכין וננקה את App.vue מתנע שיצרנו עם 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 קוֹבֶץ. בלחצן, נכלול סמל שמסמל את חץ המורה למעלה כדי להעביר חזותית את הפונקציונליות. עבור הסמל עצמו, נשתמש בספריית אייקונים בשם גופן מדהים שיש לו למעלה מ-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 כדי לעבד אותו בממשק המשתמש! אנחנו יכולים גם לסגנן את הכפתור מקובץ הרכיבים:

<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

כדי ליצור סביבה שבה משתמש עשוי לרצות להשתמש בכפתור, במקום לגלול ידנית - בואו נביא הרבה תוכן חדשותי מ-News API החינמי. להגשת בקשות אחזור, ננצל את axios חֲבִילָה.

אם עדיין לא התקנת אותו, אתה יכול לעשות זאת באמצעות Yarn או NPM:

$ yarn add axios
# Or
$ npm install axios

כדי להשתמש ב-News API, תצטרך לרשום חשבון – להשיג מפתח API שהוא חינמי עבור סביבות פיתוח. עבור הדגמה זו, נשמור על דברים פשוטים, רק על ידי שליפת כל המאמרים על, למשל, ביטקוין. בתוך ה components תיקיה, בואו ניצור קובץ חדש בשם NewsList.vue. ב NewsList.vue, נבנה רשימה של מאמרי חדשות בנושא ביטקוין שנקבל כתגובה מה-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, בעזרת המאזין הגלילה - עם גלילה למטה בעמוד או לחלק העליון של העמוד. אנחנו יכולים גם לבדוק אם משתמש נמצא בראש הדף אם 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>

יישום Scroll Event

מה שנותר לנו בשלב זה הוא לגרום לכפתור לגלול למעשה לראש העמוד כאשר משתמש לוחץ עליו. כדי להשיג זאת, בואו ניצור א scrollToTop() שיטה ב AppButton.vue. זו שיטה שהיינו משתמשים בה כאשר window.scrollY = 0. עכשיו, כאשר ה scrollToTop() השיטה נקראת, הדף שלנו גולל בצורה חלקה לחלק העליון ביותר, וגם כפתור הגלילה העליון נעלם:

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

כאשר קטע קוד זה נוסף ל AppButton.vue, תגלו שהטמענו בהצלחה פונקציונליות של גלילה למעלה באפליקציית Vue שלנו, אותה נוכל לחבר לכל פרויקט שבו אנחנו צריכים את אותו הדבר.

סיכום

כל הכבוד על העוקבת עד הסוף! 🔥

במדריך זה, בדקנו כיצד לבנות פונקציונליות של גלילה למעלה לתוך יישום Vue. זהו רכיב גנרי לשימוש חוזר וניתן להציג אותו בקלות גם בפרויקטים אחרים.

משאבים רלוונטיים