با اجزای قابل استفاده مجدد به بالا در Vue بروید

در بهبود تجربه کاربری در هر وب سایتی با محتوای زیاد در صفحات وب آن، برای توسعه دهندگان frontend معمول است که از طریق یک دکمه عملکرد اسکرول به بالا را پیاده سازی کنند تا کارها برای کاربران لذت بخش تر و راحت تر شود.

در حالی که کاربران می توانند از دستور + فلش بالا در صفحه کلید استفاده کنند، همچنین مهم است که به طور بالقوه به خاطر داشته باشید بیش از نیمی از کاربران شما ممکن است از دستگاه‌های تلفن همراه استفاده کند و هنگام پیمایش در وب‌سایت شما از صفحه‌کلید متصل به تلفن خود استفاده نکند. نمایشگرهای کوچکتر اغلب نیاز به پیمایش بیشتری دارند و پیمایش از پایین به بالا را پر زحمت می کند.

در این راهنما، ما یک دکمه اسکرول به بالا را با استفاده از Vue 3 پیاده سازی می کنیم - مرحله به مرحله. در کنار مولفه قابل استفاده مجدد، ما در حال ساخت یک برنامه خبری هستیم که اخبار فوری را از منابع مختلف با News API.

راه اندازی پروژه

شروع کار با فریم ورک Vue.JS مانند گنجاندن یک فایل جاوا اسکریپت در یک فایل 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 شروعی که با 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

و در آخر، ما آن را نصب می کنیم فونت 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')

اکنون می توانیم نماد فلش رو به بالا را as صدا کنیم 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

برای ایجاد محیطی که ممکن است کاربر بخواهد در آن از دکمه استفاده کند، به جای پیمایش دستی - بیایید محتوای خبری زیادی را از 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>

معمولا - شما می خواهید نتایج را به جای انباشته کردن آنها صفحه بندی کنید. با این حال، ما به طور خاص موردی را ایجاد می کنیم که در آن اسکرول به بالا مفید است.

نمایش/پنهان کردن دکمه اسکرول به بالا با استفاده از اسکرول شنونده

به عنوان بخشی از یک تجربه جذاب برای کاربر، اجازه دهید مطمئن شویم که دکمه اسکرول به بالا تنها زمانی آشکار می شود که کاربر شروع به اسکرول کردن صفحه به پایین کند.

برای دستیابی به این هدف، ما باید به رویداد اسکرول در نقطه ای که کاربر صفحه را به پایین اسکرول می کند گوش دهیم.

ابتدا، اجازه دهید عنصر دکمه را با تنظیم یک ref برای آن هدف قرار دهیم. سپس، ما از آن استفاده می کنیم 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>

اجرای رویداد اسکرول

چیزی که در این مرحله برای ما باقی می‌ماند این است که وقتی کاربر روی آن کلیک می‌کند، دکمه را در واقع به بالای صفحه اسکرول کنیم. برای دستیابی به این، اجازه دهید یک را ایجاد کنیم scrollToTop() روش در AppButton.vue. این روشی است که ما از آن استفاده می کنیم window.scrollY = 0. در حال حاضر، زمانی که scrollToTop() روش فراخوانی می شود، صفحه ما به آرامی به بالاترین قسمت پیمایش می شود، و دکمه اسکرول بالا-بالا نیز ناپدید می شود:

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

وقتی این قطعه کد به آن اضافه شود AppButton.vue، متوجه خواهید شد که ما یک عملکرد اسکرول به بالا را با موفقیت در برنامه Vue خود پیاده سازی کرده ایم که می توانیم به هر پروژه ای که به آن نیاز داریم متصل کنیم.

نتیجه

تبریک می گویم که تا انتها همراهی کرده اید! 🔥

در این آموزش، نحوه ساخت یک عملکرد اسکرول به بالا در یک برنامه Vue را بررسی کردیم. این یک جزء عمومی قابل استفاده مجدد است و می تواند به راحتی در پروژه های دیگر نیز معرفی شود.

منابع مرتبط