Ana içeriğe geç
Destek Çevrimiçi
MirrorLooking Glass
RabisuRabisu
Müşteri Paneli
RehberlerBilgi Bankası

Vue.js ile Sonsuz Kaydırma (Infinite Scroll) Nasıl Yapılır?

Vue.js ile sonsuz kaydırma (infinite scroll), büyük veri listelerini parça parça yükleyerek hem performansı hem kullanıcı deneyimini artırır.
Özellikle mobil cihazlarda, sayfalama (pagination) yerine infinite scroll tercih edilir.

Bu rehberde, harici kütüphane kullanmadan Vue.js ve Axios ile modern bir infinite scroll yapısı kuracağız.

Bu Rehberde Ne Öğreneceksiniz?​

  • Vue CLI ile proje ortamının hazırlanması
  • Axios ile API üzerinden veri çekilmesi
  • Scroll olaylarının matematiksel olarak kontrol edilmesi
  • Sayfa sonuna gelince otomatik veri yüklenmesi

Ön Gereksinimler​

  • Bilgisayarda Node.js kurulu olmalı
  • Temel Vue.js ve JavaScript bilgisi yeterlidir

1️⃣ Proje Kurulumu​

npx @vue/cli create rabisu-sonsuz-kaydirma --default
  • Bu komut varsayılan Vue yapılandırmasıyla yeni bir proje oluşturur.
cd rabisu-sonsuz-kaydirma
npm install axios
  • Bu adım HTTP istekleri için Axios kurar.

2️⃣ Başlangıç Verilerini Yükleme​

<template>
  <div id="app">
    <h1>Rabisu Kullanıcı Listesi</h1>

    <div
      class="kullanici-karti"
      v-for="user in users"
      :key="user.login.uuid"
    >
      <div class="avatar">
        <img :src="user.picture.large" />
      </div>

      <div class="detaylar">
        <h2>{{ user.name.first }} {{ user.name.last }}</h2>
        <ul>
          <li><strong>Doğum:</strong> {{ tarihFormatla(user.dob.date) }}</li>
          <li><strong>Konum:</strong> {{ user.location.city }}, {{ user.location.state }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>
  • Bu template kullanıcı kartlarını liste halinde gösterir.
.kullanici-karti {
  display: flex;
  background: #f4f4f4;
  margin: 15px auto;
  padding: 10px;
  max-width: 600px;
  border-radius: 8px;
}
  • Bu stiller kart görünümünü düzenler.
<script>
import axios from "axios";

export default {
  data() {
    return { users: [] };
  },
  methods: {
    ilkKullanicilariGetir() {
      axios.get("https://randomuser.me/api/?results=5")
        .then(res => this.users = res.data.results);
    },
    tarihFormatla(tarih) {
      return new Date(tarih).toLocaleDateString("tr-TR");
    }
  },
  beforeMount() {
    this.ilkKullanicilariGetir();
  }
};
</script>
  • Bu kod sayfa açıldığında ilk verileri getirir.

3️⃣ Sonsuz Kaydırma Mantığı​

yeniKullaniciGetir() {
  window.onscroll = () => {
    let sayfaSonu =
      document.documentElement.scrollTop +
      window.innerHeight >=
      document.documentElement.offsetHeight - 10;

    if (sayfaSonu) {
      axios.get("https://randomuser.me/api/")
        .then(res => {
          this.users.push(res.data.results[0]);
        });
    }
  };
}
  • Bu fonksiyon sayfanın altına gelindiğini kontrol eder ve yeni veri ekler.
mounted() {
  this.yeniKullaniciGetir();
}
  • Bu çağrı infinite scroll’u aktif eder.

⚡ Performans İyileştirme (Önerilen)​

  1. Scroll olayı çok sık tetiklenir. Gerçek projelerde debounce önerilir:
let timeout;
window.onscroll = () => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    // scroll kontrolü
  }, 200);
};
  • Bu yöntem gereksiz API çağrılarını azaltır.

🧠 Modern Alternatif Notu​

  1. Daha ileri projelerde IntersectionObserver kullanmak,
  2. scroll hesaplamasına göre daha performanslı bir çözümdür.

❓ Sıkça Sorulan Sorular​

1. Infinite scroll SEO’ya zarar verir mi? Doğru uygulanmazsa evet. Sunucu tarafı render önerilir.

2. Mobil uyumlu mu? Evet. Modern tarayıcıların tamamında çalışır.

3. Kütüphane kullanmalı mıyım? Basit projelerde gerekmez. Büyük projelerde tercih edilebilir.

🎯 Sonuç​

Vue.js ile sonsuz kaydırma özelliğini başarıyla kurdunuz. Bu yapı, kullanıcıların içerikte daha uzun süre kalmasını sağlar.

Bu tür performanslı Vue.js uygulamalarını Rabisu Bulut altyapısında güvenle yayınlayabilirsiniz 🚀