Uygulamanızda büyük veri kümelerini görüntülemeniz gerektiğinde sonsuz kaydırma kullanışlı olur. Vue.js'de nasıl uygulayacağınızı öğrenin.
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.
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 @vueuse/çekirdek (temel Vue yardımcı programları sunar).
kullanacaksın eksenler Ve @iconify/vue veri almak ve uygulamanıza simgeler eklemek için. @vueuse/ç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.jsimport axios from"axios";
asyncfunctiongetComments(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);
}
}
exportdefault 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.
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.
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.
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:
