دوبارہ قابل استعمال اجزاء کے ساتھ Vue میں اوپر تک سکرول کریں۔

کسی بھی ویب سائٹ پر اس کے ویب صفحات پر بہت سارے مواد کے ساتھ صارف کے تجربے کو بہتر بنانے میں، فرنٹ اینڈ ڈویلپرز کے لیے ایک بٹن کے ذریعے اسکرول ٹو ٹاپ فعالیت کو لاگو کرنا ایک عام بات ہے، تاکہ صارفین کے لیے چیزوں کو مزید پرلطف اور آسان بنایا جا سکے۔

جب کہ صارف کی بورڈ پر کمانڈ + اپ ایرو استعمال کر سکتے ہیں، یہ بات ذہن میں رکھنا بھی ضروری ہے کہ ممکنہ طور پر آپ کے آدھے سے زیادہ صارفین ہو سکتا ہے موبائل ڈیوائسز استعمال کر رہے ہوں اور آپ کی ویب سائٹ پر سکرول کرتے وقت اپنے فون سے منسلک کی بورڈ استعمال نہیں کر رہے ہوں گے۔ چھوٹی اسکرینوں کو اکثر اوقات مزید اسکرولنگ کی بھی ضرورت پڑتی ہے، جس سے نیچے سے اوپر تک نیویگیشن مشکل ہو جاتی ہے۔

اس گائیڈ میں، ہم Vue 3 کا استعمال کرتے ہوئے ایک اسکرول ٹو ٹاپ بٹن نافذ کریں گے – مرحلہ وار۔ دوبارہ قابل استعمال اجزاء کے ساتھ ساتھ، ہم ایک نیوز ایپ بنا رہے ہیں جو مختلف ذرائع سے بریکنگ نیوز فراہم کرتا ہے نیوز API.

پروجیکٹ سیٹ اپ

Vue.JS فریم ورک کے ساتھ شروع کرنا آسان ہے جیسا کہ HTML فائل میں JavaScript فائل کو شامل کرنا۔ لیکن ایک حقیقی دنیا اور بڑے پیمانے پر ایپلی کیشن کے لیے، 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>

بٹن UI بنانا

اس صفحے کے ساتھ جو بٹن (اور خبروں) کو ظاہر کرے گا - ہم اجزاء کی تعمیر شروع کر سکتے ہیں۔ آئیے بٹن کے ساتھ شروع کریں!

میں 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

اور آخر میں، ہم انسٹال کریں گے فونٹ بہت اچھے 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>

DOM پر، جب آپ اپنی ایپلیکیشن کو آن کرتے ہیں تو ہمارا سکرول ٹو ٹاپ بٹن اس طرح نظر آنا چاہیے۔ localhost:8080:

نیوز فیڈز UI بنانا

ایسا ماحول بنانے کے لیے جس میں صارف دستی طور پر اسکرولنگ کے بجائے بٹن استعمال کرنا چاہے - آئیے مفت News API سے بہت سے خبروں کا مواد حاصل کریں۔ بازیافت کی درخواستیں کرنے کے لیے، ہم اس کا فائدہ اٹھائیں گے۔ axios پیکیج.

اگر آپ نے اسے پہلے سے انسٹال نہیں کیا ہے، تو آپ یارن یا 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>

اسکرول ایونٹ کو نافذ کرنا

اس مقام پر ہمارے لیے جو بچا ہے وہ یہ ہے کہ جب صارف اس پر کلک کرتا ہے تو بٹن کو صفحہ کے اوپری حصے تک اسکرول کرنا ہے۔ اس کو حاصل کرنے کے لیے، آئیے ایک بنائیں scrollToTop() میں طریقہ AppButton.vue. یہ ایک ایسا طریقہ ہے جسے ہم اس وقت استعمال کریں گے۔ window.scrollY = 0. اب، جب scrollToTop() طریقہ کہا جاتا ہے، ہمارا صفحہ آسانی سے سب سے اوپر والے حصے تک سکرول کرتا ہے، اور اسکرول ٹاپ ٹاپ بٹن بھی غائب ہوجاتا ہے:

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

جب کوڈ کا یہ ٹکڑا شامل کیا جاتا ہے۔ AppButton.vue، آپ کو معلوم ہوگا کہ ہم نے اپنی Vue ایپ میں اسکرول ٹو ٹاپ فعالیت کو کامیابی کے ساتھ نافذ کیا ہے جسے ہم کسی بھی پروجیکٹ میں پلگ ان کرسکتے ہیں جہاں ہمیں اس کی ضرورت ہے۔

نتیجہ

آخر تک ساتھ چلنے پر مبارکباد! 🔥

اس ٹیوٹوریل میں، ہم نے دیکھا کہ Vue ایپلی کیشن میں اسکرول ٹو ٹاپ فعالیت کیسے بنائی جائے۔ یہ دوبارہ قابل استعمال عام جزو ہے اور آسانی سے دوسرے منصوبوں میں بھی متعارف کرایا جا سکتا ہے۔

متعلقہ وسائل