पुन: प्रयोज्य घटकों के साथ Vue में शीर्ष पर स्क्रॉल करें

किसी भी वेबसाइट पर अपने वेब पेजों पर बहुत सारी सामग्री के साथ उपयोगकर्ता अनुभव को बेहतर बनाने में, फ्रंटएंड डेवलपर्स के लिए एक बटन के माध्यम से स्क्रॉल-टू-टॉप कार्यक्षमता को लागू करना आम बात है, ताकि उपयोगकर्ताओं के लिए चीजों को और अधिक मनोरंजक और सुविधाजनक बनाया जा सके।

जबकि उपयोगकर्ता कीबोर्ड पर + अप एरो कमांड का उपयोग कर सकते हैं, यह भी ध्यान रखना महत्वपूर्ण है कि संभावित रूप से आपके आधे से अधिक उपयोगकर्ता हो सकता है कि मोबाइल उपकरणों का उपयोग कर रहे हों और आपकी वेबसाइट पर स्क्रॉल करते समय अपने फ़ोन से जुड़े कीबोर्ड का उपयोग नहीं कर रहे हों। छोटी स्क्रीनों में भी कई बार अधिक स्क्रॉलिंग की आवश्यकता होती है, जिससे नीचे से ऊपर तक नेविगेशन कठिन हो जाता है।

इस गाइड में, हम Vue 3 - स्टेप बाय स्टेप का उपयोग करके स्क्रॉल-टू-टॉप बटन लागू करेंगे। पुन: प्रयोज्य घटक के साथ, हम एक समाचार ऐप का निर्माण करेंगे जो विभिन्न स्रोतों से ब्रेकिंग न्यूज प्रदान करता है समाचार एपीआई.

प्रोजेक्ट सेटअप

Vue.JS फ्रेमवर्क के साथ शुरुआत करना HTML फ़ाइल में JavaScript फ़ाइल को शामिल करने के समान सरल है। लेकिन वास्तविक दुनिया और बड़े पैमाने पर अनुप्रयोग के लिए, vue-cli आरंभ करने का सबसे अच्छा तरीका है! हम का उपयोग करेंगे vue-cli आज के हमारे ट्यूटोरियल में।

आइए प्रोजेक्ट बनाएं और इसे नाम दें vue-scroll-to-top, नीचे दिए गए आदेश का उपयोग कर:

$ vue create vue-scroll-to-top

यह हमारी परियोजना का निर्माण शुरू करने के लिए एक टेम्पलेट बनाता है। आप परियोजना में जाकर आवेदन शुरू कर सकते हैं:

$ cd vue-scroll-to-top

तथा serve यह यार्न या एनपीएम के साथ:

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

बटन UI का निर्माण

उस पृष्ठ के साथ जो बटन (और समाचार) प्रदर्शित करेगा - हम घटकों का निर्माण शुरू कर सकते हैं। चलो बटन से शुरू करते हैं!

में components फ़ोल्डर, एक बनाएँ AppButton.vue फ़ाइल। बटन में, हम एक आइकन शामिल करेंगे जो दर्शाता है ऊपर की ओर तीर कार्यक्षमता को नेत्रहीन रूप से व्यक्त करने के लिए। आइकन के लिए ही, हम एक आइकन लाइब्रेरी का उपयोग करेंगे, जिसे कहा जाता है बहुत बढ़िया फ़ॉन्ट जिसमें 19.000 शैलियों और ब्रांडों पर 6 से अधिक आइकन हैं, हालांकि इसे एक साधारण कैरेट चिह्न से बदला जा सकता है (^), एक कस्टम आइकन या अन्य पुस्तकालयों से एक आइकन यदि आप किसी अन्य निर्भरता का परिचय नहीं देना चाहते हैं।

अपने पसंदीदा निर्भरता प्रबंधक का उपयोग करके, कोर पैकेज स्थापित करें जिसमें आइकनों को काम करने के लिए सभी सुविधाएं शामिल हैं:

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

अगला, हम स्थापित करेंगे फ्री सॉलिड एसवीजी आइकॉन (एकाधिक उपलब्ध "सेट" या शैलियों में से एक), निम्न आदेश का उपयोग कर:

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

और अंत में, हम स्थापित करेंगे फ़ॉन्ट विस्मयकारी Vue घटक Vue 3 के लिए, निम्न कमांड का उपयोग करें:

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

इससे पहले कि हम अपने बटन में अपना आइकन प्रस्तुत कर सकें, हमें अपने प्रोजेक्ट में स्थापित फ़ॉन्ट विस्मयकारी निर्भरता को आयात करने की आवश्यकता है, जिसमें विशिष्ट आइकन नाम भी शामिल है जिसका हम उपयोग करना चाहते हैं। आइए अपडेट करें 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>

डीओएम पर, हमारा स्क्रॉल-टू-टॉप बटन इस तरह दिखना चाहिए, जब आप अपना एप्लिकेशन खोलते हैं localhost:8080:

समाचार फ़ीड UI का निर्माण

ऐसा वातावरण बनाने के लिए जिसमें उपयोगकर्ता मैन्युअल रूप से स्क्रॉल करने के बजाय बटन का उपयोग करना चाहे - आइए निःशुल्क समाचार एपीआई से बहुत सारी समाचार सामग्री प्राप्त करें। लाने के अनुरोध करने के लिए, हम इसका लाभ उठाएंगे axios पैकेज.

यदि आपने इसे पहले से स्थापित नहीं किया है, तो आप यार्न या एनपीएम के माध्यम से ऐसा कर सकते हैं:

$ yarn add axios
# Or
$ npm install axios

समाचार API का उपयोग करने के लिए, आपको एक पंजीकरण करना होगा खाते - एक एपीआई कुंजी प्राप्त करने के लिए जो विकास के वातावरण के लिए मुफ़्त है। इस डेमो के लिए, हम केवल बिटकॉइन के बारे में सभी लेख लाकर चीजों को सरल रखेंगे। में components फ़ोल्डर, चलो नामक एक नई फ़ाइल बनाते हैं NewsList.vue. में NewsList.vue, हम बिटकॉइन समाचार लेखों की एक सूची तैयार करेंगे जो हमें एपीआई से प्रतिक्रिया के रूप में मिलेगा।

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>

स्क्रॉल इवेंट लागू करना

इस बिंदु पर हमारे लिए जो कुछ बचा है वह यह है कि जब कोई उपयोगकर्ता इसे क्लिक करता है तो बटन वास्तव में पृष्ठ के शीर्ष पर स्क्रॉल करता है। इसे प्राप्त करने के लिए, आइए एक बनाएं scrollToTop() में विधि AppButton.vue. यह एक तरीका है जिसे हम तब लागू करेंगे जब window.scrollY = 0. अब, जब scrollToTop() विधि कहा जाता है, हमारा पृष्ठ आसानी से शीर्ष भाग तक स्क्रॉल करता है, और स्क्रॉल-टॉप-टॉप बटन भी गायब हो जाता है:

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

जब कोड के इस स्निपेट को जोड़ा जाता है AppButton.vue, आप पाएंगे कि हमने अपने Vue ऐप में एक स्क्रॉल-टू-टॉप कार्यक्षमता को सफलतापूर्वक कार्यान्वित किया है जिसे हम किसी भी प्रोजेक्ट में प्लग इन कर सकते हैं जहां हमें इसकी आवश्यकता है।

निष्कर्ष

अंत तक साथ चलने के लिए बधाई! मैं

इस ट्यूटोरियल में, हमने देखा कि कैसे एक Vue एप्लिकेशन में स्क्रॉल-टू-टॉप कार्यक्षमता का निर्माण किया जाए। यह एक पुन: प्रयोज्य जेनेरिक घटक है और इसे अन्य परियोजनाओं में भी आसानी से पेश किया जा सकता है।

प्रासंगिक संसाधन