Web sayfalarında çok fazla içerik bulunan herhangi bir web sitesinde kullanıcı deneyimini geliştirirken, ön uç geliştiricilerin işleri kullanıcılar için daha keyifli ve kullanışlı hale getirmek için bir düğme aracılığıyla yukarı kaydırma işlevi uygulaması yaygın bir durumdur.
Kullanıcılar bir klavyede komut + yukarı ok tuşlarını kullanabilse de, potansiyel olarak kullanıcılarınızın yarısından fazlası mobil cihazlar kullanıyor olabilir ve web sitenizde gezinirken telefonlarına bağlı bir klavye kullanmıyor olabilir. Daha küçük ekranlar çoğu zaman daha fazla kaydırmayı gerektirerek aşağıdan yukarıya gezinmeyi zahmetli hale getirir.
Bu kılavuzda, Vue 3'ü kullanarak adım adım bir yukarı kaydırma düğmesi uygulayacağız. Yeniden kullanılabilir bileşenin yanı sıra, çeşitli kaynaklardan son dakika haberleri sağlayan bir haber uygulaması geliştireceğiz. Haber API'sı.
Kaynak Kodu: Her zamanki gibi, üzerinde barındırılan kaynak kodunu kurcalayabilirsiniz. GitHub.
Proje Kurulumu
Vue.JS çerçevesini kullanmaya başlamak, bir JavaScript dosyasını bir HTML dosyasına dahil etmek kadar basittir. Ancak gerçek dünya ve büyük ölçekli bir uygulama için, vue-cli başlamak için en iyi yoldur! biz kullanacağız vue-cli Bugünkü eğitimimizde.
Projeyi oluşturalım ve adlandıralım vue-scroll-to-top, aşağıdaki komutu kullanarak:
$ vue create vue-scroll-to-top
Bu, projemizi oluşturmaya başlamak için bir şablon oluşturur. Projeye geçerek uygulamayı başlatabilirsiniz:
$ cd vue-scroll-to-top
Ve serve Yarn veya NPM ile:
$ yarn serve
Veya:
$ npm run serve
On localhost, limanda 8080 – başvurunuz sunulacak:
Bileşenleri Oluşturma
Şablon hazır olduğunda, oluşturmak istediğiniz herhangi bir uygulama için genelleştirilebilen yeniden kullanılabilir yukarı kaydır bileşenini oluşturmaya başlayabiliriz. Bileşeni tanımlamadan önce, ön hazırlık yapalım ve temizleyelim App.vue Vue CLI ile oluşturduğumuz başlangıç.
Vue Projesinin Temizlenmesi
Altında src/App.vue, yakında olacak bileşeni şu şekilde kaydedeceğiz 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>
Düğme Kullanıcı Arayüzünü Oluşturma
Düğmeyi (ve haberleri) gösterecek olan sayfa ile bileşenleri oluşturmaya başlayabiliriz. Düğme ile başlayalım!
içinde components klasör oluştur AppButton.vue dosya. Düğmeye, şu anlama gelen bir simge ekleyeceğiz: yukarı ok işlevselliği görsel olarak iletmek için. Simgenin kendisi için, adında bir simge kitaplığı kullanacağız. Müthiş Yazı 19.000 stil ve marka üzerinde 6'den fazla simgeye sahiptir, ancak bu basit bir şapka işaretiyle değiştirilebilir (^), özel bir simge veya başka bir bağımlılık oluşturmak istemiyorsanız diğer kitaplıklardan bir simge.
Tercih ettiğiniz bağımlılık yöneticisini kullanarak, simgeleri çalıştıracak tüm yardımcı programları içeren çekirdek paketi kurun:
$ yarn add @fortawesome/fontawesome-svg-core
# Or
$ npm i --save @fortawesome/fontawesome-svg-core
Ardından, ücretsiz katı SVG simgeleri (mevcut birden fazla "küme" veya stilden biri), aşağıdaki komutu kullanarak:
En iyi uygulamalar, endüstri tarafından kabul edilen standartlar ve dahil edilen hile sayfası ile Git'i öğrenmek için uygulamalı, pratik kılavuzumuza göz atın. Googling Git komutlarını durdurun ve aslında öğrenmek o!
$ yarn add @fortawesome/free-solid-svg-icons
# Or
$ npm i --save @fortawesome/free-solid-svg-icons
Ve son olarak, Harika Yazı Tipi Vue Bileşeni Vue 3 için aşağıdaki komutu kullanarak:
$ yarn add @fortawesome/[email protected]
# Or
$ npm i --save @fortawesome/[email protected]
Simgemizi düğmemizde oluşturmadan önce, kullanmak istediğimiz belirli simge adı da dahil olmak üzere kurulu Font Awesome bağımlılıklarını projemize aktarmamız gerekir. güncelleyelim main.js Dosya:
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')
Artık yukarı ok simgesini şu şekilde arayabiliriz: faArrowUp, içinde AppButton.vue kullanıcı arayüzünde oluşturmak için! Düğmeyi bileşen dosyasından da biçimlendirebiliriz:
<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'da, uygulamanızı açtığınızda yukarı kaydırma düğmemiz böyle görünmelidir. localhost:8080:
Haber Kaynakları Kullanıcı Arayüzünü Oluşturma
Bir kullanıcının manuel olarak kaydırmak yerine düğmeyi kullanmak isteyebileceği bir ortam oluşturmak için ücretsiz News API'sinden çok sayıda haber içeriği getirelim. Getirme istekleri yapmak için şu avantajlardan yararlanacağız: axios paketi.
Henüz yüklemediyseniz, bunu Yarn veya NPM aracılığıyla yapabilirsiniz:
$ yarn add axios
# Or
$ npm install axios
News API'yi kullanmak için bir hesap – geliştirme ortamları için ücretsiz olan bir API anahtarı elde etmek için. Bu demo için, örneğin Bitcoin hakkındaki tüm makaleleri getirerek her şeyi basit tutacağız. İçinde components adında yeni bir dosya oluşturalım. NewsList.vue. içinde NewsList.vue, API'den yanıt olarak alacağımız Bitcoin haber makalelerinin bir listesini oluşturacağız.
NewsList.vue şimdi aşağıdaki kodları içermelidir:
<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>
Ardından, güncellediğinizden emin olun App.vue, böylece haber makaleleri listesi görüntülenebilir:
<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>
Genellikle sonuçları bir araya getirmek yerine sayfalandırmak istersiniz. Ancak, özellikle yukarı kaydırmanın yararlı olduğu bir durum yaratıyoruz.
Scroll Listener'ı Kullanarak En Üste Kaydırma Düğmesini Göster/Gizle
Kullanıcı için ilgi çekici bir deneyimin parçası olarak, yukarı kaydır düğmesinin yalnızca kullanıcı sayfayı aşağı kaydırmaya başladığında göründüğünden emin olalım.
Bunu başarmak için kullanıcının sayfayı aşağı kaydırdığı noktada scroll olayını dinlemeliyiz.
İlk olarak, bir ref ayarlayarak button elemanını hedefleyelim. Ardından, beforeUnmount() Kaydırma dinleyicisinin yardımıyla - sayfada aşağı veya sayfanın en üstüne kaydırıldığında - düğmeyi DOM'a eklemek ve DOM'dan kaldırmak için yaşam döngüsü kancaları. Bir kullanıcının sayfanın başında olup olmadığını da kontrol edebiliriz. window.scrollY 0'dan büyüktür. Bununla, gerektiği yerde düğmenin görünürlüğünü değiştirebiliriz.
güncelleyelim AppButton.vue kullanıcının ne kadar kaydırdığına bağlı olarak düğmeyi görüntülemek veya gizlemek için bileşen:
<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>
Kaydırma Etkinliğini Uygulama
Bu noktada bize kalan, bir kullanıcı tıkladığında düğmeyi gerçekten sayfanın en üstüne kaydırmak. Bunu başarmak için bir oluşturalım scrollToTop() yöntem AppButton.vue. Bu, ne zaman çağıracağımız bir yöntemdir. window.scrollY = 0. Şimdi, ne zaman scrollToTop() yöntem çağrıldığında, sayfamız sorunsuz bir şekilde en üst kısma kaydırılır ve üste kaydırma düğmesi de kaybolur:
const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: "smooth" });
};
Bu kod parçacığı eklendiğinde AppButton.vue, Vue uygulamamızda, ihtiyacımız olan herhangi bir projeye ekleyebileceğimiz bir yukarı kaydırma işlevini başarıyla uyguladığımızı göreceksiniz.
Sonuç
Sonuna kadar takip ettiğiniz için tebrikler! 🔥
Bu öğreticide, bir Vue uygulamasında yukarı kaydırma işlevinin nasıl oluşturulacağına baktık. Bu, yeniden kullanılabilir genel bir bileşendir ve diğer projelerde de kolayca tanıtılabilir.
