Home-theater-designers
Sonsuz kaydırma, uygulamanızın kullanıcısı sayfayı aşağı kaydırdıkça daha fazla içerik görüntülemek için kullanabileceğiniz bir tekniktir. Sayfalandırma ihtiyacını ortadan kaldırır ve uygulama kullanıcılarının büyük veri kümeleri arasında gezinmeye devam etmelerini sağlar.
Günün MUO Videosu İÇERİKLE DEVAM ETMEK İÇİN KAYDIRIN
Vue Uygulamanızı Kurma
Bu öğreticiyi takip etmek için Vue 3 ve JavaScript hakkında temel bilgilere sahip olmanız gerekir. Nasıl davranılacağını bilmelisin Axios ile HTTP istekleri .
Nasıl yapılacağını öğrenmeye başlamak için sonsuz kaydırmayı uygula , aşağıdakileri çalıştırarak yeni bir Vue uygulaması oluşturun npm tercih ettiğiniz dizinde komut:
npm create vue
Proje kurulumu sırasında Vue, uygulamanız için bir ön ayar seçmenizi isteyecektir. Seçmek HAYIR Uygulamanıza herhangi bir eklemeye ihtiyacınız olmayacağından tüm özellikler için.
Yeni uygulamayı oluşturduktan sonra, uygulamanın dizinine gidin ve aşağıdakileri çalıştırın npm gerekli paketleri kurma komutu:
npm install axios @iconify/vue @vueuse/core
bu npm komut üç paket kurar: eksenler (HTTP istekleri için), @iconify/vue (Vue'da kolay simge entegrasyonu için) , Ve @görünüm/çekirdek (temel Vue yardımcı programları sunar).
kullanacaksın eksenler Ve @iconify/vue veri almak ve uygulamanıza simgeler eklemek için. @görünüm/çekirdek dahil olmak üzere Vue yardımcı programlarını içerir. InfiniteScroll'u kullan sonsuz kaydırma elde etmek için bileşen.
JSONPlaceholder API'sinden Sahte Verileri Alma
Sonsuz kaydırma işlevini uygulamak için verilere ihtiyacınız var. Bu verileri sabit kodlayabilir veya ücretsiz bir sahte API kaynağından veri alabilirsiniz. JSONYer Tutucu .
Çoğu web uygulaması verileri sabit kodlanmış veriler yerine veritabanlarından aldığından, bu verileri JSONPlaceholder'dan almak gerçek hayat senaryolarını taklit eder.
Vue uygulamanız için API'den veri almak için, Vue uygulamanızda yeni bir klasör oluşturun. kaynak dizin ve adlandırın API . Bu klasöre yeni bir JavaScript dosyası oluşturun ve aşağıdaki kodu yapıştırın:
//getComments.js
import axios from "axios";
async function getComments(max, omit) {
try {
const comments = await axios.get(
`https://jsonplaceholder.typicode.com/comments?_limit=${max}&_start=${omit}`
);
return comments.data.map((comment) => comment.body);
} catch (error) {
console.error(error);
}
}
export default getComments;
Kod parçacığı, API uç noktasından yorum almak için eşzamansız bir işlevden oluşur. 'https://jsonplaceholder.typicode.com/comments' . Daha sonra işlevi dışa aktarır.
Daha fazla açıklamak için, kod parçacığı içe aktarma ile başlar. eksenler kütüphane. Kod daha sonra tanımlar yorum almak iki bağımsız değişkenli işlev: maks. Ve çıkarmak .
eski facebook mesajları nasıl geri alınır
bu yorum almak işlevi barındırır eksenler.get() URL'ye bir GET isteği yapan yöntem. URL, sorgu parametreleri içeriyor maks. Ve çıkarmak şablon değişmezleri ( `` ). Bu, dinamik değerleri URL'ye iletmenizi sağlar.
Fonksiyon daha sonra aşağıdakilerden oluşan yeni bir dizi döndürür. vücut kullanılarak API uç noktasından alınan yorumların harita işlev.
802.11 standartlar seti şu şekilde bilinir:
Herhangi bir hata oluşursa, kod parçacığı bunu konsola kaydeder. Kod parçacığı daha sonra bu işlevi uygulamanızın diğer bölümlerine aktarır.
Sonsuz Kaydırma Bileşenini Oluşturma
Artık sahte verileri alma mantığını hallettiğinize göre, sahte verileri görüntülemek ve sonsuz kaydırma işlevini yönetmek için yeni bir bileşen oluşturabilirsiniz.
yeni bir dosya oluştur InfiniteScroll.vue içinde kaynak/bileşenler dizin ve aşağıdaki kodu ekleyin:
<!-- InfiniteScroll.vue -->
<script setup>
import { ref } from "vue";
import getComments from "../api/getComments";
import { useInfiniteScroll } from "@vueuse/core";
const listEl = ref(null);
const commentsDisplayed = 20;
const commentsList = ref(await getComments(commentsDisplayed, 0));
const commentsToDisplayOnScroll = async () => {
const newComments = await getComments(
commentsDisplayed,
commentsList.value.length
);
commentsList.value.push(...newComments);
};
useInfiniteScroll(
listEl,
async () => {
await commentsToDisplayOnScroll();
},
{ distance: 10 }
);
</script>
Yukarıdaki kod parçacığı, komut dosyası bloğunu açıklar. Sonsuz kaydırma bileşen.
Kod parçacığı şunları içe aktarır: referans Ve InfiniteScroll'u kullan işlevleri görüş Ve @görünüm/çekirdek , sırasıyla. Snippet ayrıca şunları da içe aktarır: yorum almak işlevi getComments.js dosya.
Ardından, snippet bir listeEl ile referans referans işlev. listeEl sonsuz kaydırma işlevine sahip DOM öğesine başvurur.
bu yorumlarGörüntülendi değişken, sayfada başlangıçta görüntülenecek yorumların sayısını temsil eder. yorum listesi kod parçacığının getirdiği yorum dizisini tutar yorum almak işlev.
Snippet, bir yorumlarKaydırmadaGörüntülenecek ile yeni yorumlar getiren eşzamansız işlev yorum almak işlev görür ve bunları mevcut yorum listesi yayılma işleci ile dizi ( ... ).
Son olarak, kod parçacığı şunu çağırır: InfiniteScroll'u kullan üç bağımsız değişken alarak sonsuz kaydırma davranışını etkinleştirme işlevi:
- DOM öğesi ( listeEl ) başvuru, uygulama kullanıcısının kaydıracağı listeyi temsil eder.
- Kullanıcı yeni yorumların alınmasını ve bunları yoruma eklemeyi tetiklemek için kaydırdığında bir zaman uyumsuz işlev çağrısı yorum listesi .
- Özelliklere sahip isteğe bağlı bir yapılandırma nesnesi. Nesne { mesafe: 10 } kullanıcı listenin en altından 10 piksel uzakta olduğunda yeni yorumların yüklenmeye başlaması gerektiğini belirtir.
Sonsuz Kaydırma Bileşenini Kullanma
Komut dosyası bloğundaki sonsuz kaydırma mantığını işledikten sonra Sonsuz kaydırma bileşen, içeriği şablon bloğunda oluşturmanız gerekir.
Aşağıdaki kod bloğunu bilgisayarınıza yapıştırın Sonsuz kaydırma bileşen:
<!-- InfiniteScroll.vue -->
<template>
<div>
<ul ref="listEl">
<li v-for="comment in commentsList">
{{ comment }}
</li>
</ul>
</div>
</template>
Bu kod bloğu, bir yorum listesi oluşturmaktan sorumlu bir Vue bileşeni için şablonu tanımlar.
bu öğe bir koleksiyona sahiptir
Dizideki her yorum bir Sonsuz kaydırma işlevini etkinleştirmek için.
Daha sonra şunu kullanabilirsiniz: Sonsuz kaydırma senin içindeki bileşen uygulama.vue dosya.
<!-- App.vue -->
<script setup>
import InfiniteScroll from "./components/InfiniteScroll.vue";
import { Icon } from "@iconify/vue";
</script>
<template>
<Suspense>
<InfiniteScroll />
<template #fallback>
<Icon icon="eos-icons:bubble-loading" width="250" height="250" />
</template>
</Suspense>
</template>
Yukarıdaki kod bloğu içe aktarır Sonsuz kaydırma Bileşen ve Simge bileşen. Daha sonra sarar Sonsuz kaydırma bir bileşen gerilim bileşen.
bu gerilim Vue, bileşendeki tüm eşzamansız işlevleri çözdüğü için bileşen, geri dönüş içeriğini (bir simge) oluşturmanıza olanak tanır. Sonsuz kaydırma bileşen.
Artık komutu çalıştırarak uygulamanızın önizlemesini görebilirsiniz. npm geliştiriciyi çalıştır uygulamanın dizininde. Aşağıdaki resme benzer bir arayüz görmelisiniz:
Yukarıdaki önizleme, siz ayarı yaparken on yorumu görüntüler. yorumlarGörüntülenecek 10'a kadar değişken. Aşağı kaydırdıkça uygulama okunacak daha fazla yorum yükler.
Sonsuz kaydırma tekniği web uygulamaları arasında, özellikle de X ve Tiktok gibi sosyal medya uygulamalarında popülerdir.
facebookta bildirim nasıl silinir
Bu teknik, sürekli olarak daha fazla veri alırken uygulama kullanıcılarının etkileşimde kalmasını sağlar; onlara okuma, öğrenme ve izleme için sürekli genişleyen bir içerik akışı sağlayarak ilgilerini canlı tutar.
Vue Bileşenlerini Yuvalarla Yeniden Kullanmayı Öğrenin
VueUse'da mevcut olan useInfiniteScroll bileşeniyle sonsuz kaydırma tekniğini nasıl uygulayacağınızı öğrendiniz.
Günümüz web sitelerinde aynı bileşenleri farklı HTML içeriğiyle oluşturmak yaygındır. Bir web uygulamasının farklı bölümlerinde bu tutarlı hissi elde etmek için Vue bileşenlerini yeniden kullanmayı öğrenebilirsiniz.