قم بالتمرير إلى Top in Vue with Reusable Components

في تحسين تجربة المستخدم على أي موقع ويب به الكثير من المحتوى على صفحات الويب الخاصة به ، من الشائع لمطوري الواجهة الأمامية تنفيذ وظيفة التمرير لأعلى من خلال زر ، لجعل الأمور أكثر متعة وملاءمة للمستخدمين.

بينما يمكن للمستخدمين استخدام الأمر + السهم لأعلى على لوحة المفاتيح ، من المهم أيضًا مراعاة ذلك أكثر من نصف المستخدمين لديك ربما يستخدمون الأجهزة المحمولة ولن يستخدموا لوحة مفاتيح متصلة بهواتفهم أثناء التمرير عبر موقع الويب الخاص بك. تتطلب الشاشات الأصغر في كثير من الأحيان مزيدًا من التمرير ، مما يجعل التنقل من الأسفل إلى الأعلى شاقًا.

في هذا الدليل ، سنقوم بتنفيذ زر التمرير لأعلى باستخدام Vue 3 - خطوة بخطوة. إلى جانب المكون القابل لإعادة الاستخدام ، سنبني تطبيقًا إخباريًا يوفر الأخبار العاجلة من مصادر مختلفة باستخدام واجهة برمجة تطبيقات الأخبار.

إعداد مشروع

إن بدء استخدام إطار عمل 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 المبدئ الذي أنشأناه باستخدام 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 لـ 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 API المجانية. لإجراء طلبات الجلب ، سنستفيد من axios الحزمة.

إذا لم يكن مثبتًا لديك بالفعل ، فيمكنك القيام بذلك عبر Yarn أو NPM:

$ yarn add axios
# Or
$ npm install axios

لاستخدام News 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>

عادةً - تريد ترقيم النتائج بدلاً من تكديسها. ومع ذلك ، فإننا نقوم على وجه التحديد بإنشاء حالة يكون فيها التمرير لأعلى مفيدًا.

إظهار / إخفاء التمرير إلى الزر العلوي باستخدام Scroll Listener

كجزء من تجربة تفاعلية للمستخدم ، دعنا نتأكد من أن زر التمرير لأعلى يظهر فقط عندما يبدأ المستخدم في التمرير لأسفل الصفحة.

لتحقيق ذلك ، يتعين علينا الاستماع إلى حدث التمرير في النقطة التي يقوم فيها المستخدم بالتمرير لأسفل الصفحة.

أولاً ، دعنا نستهدف عنصر الزر بتعيين مرجع له. ثم نستفيد من ملف 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. هذا مكون عام قابل لإعادة الاستخدام ويمكن تقديمه بسهولة في مشاريع أخرى أيضًا.

الموارد ذات الصلة