Tətbiqlərdə sonsuz skroll: bu nədir, prinsip və tətbiqi

Mobil tətbiqlərdə sonsuz skroll nədir?

Sonsuz skroll (Infinite Scroll) — skroll zamanı yeni elementlərin avtomatik olaraq siyahının sonuna əlavə edildiyi məlumat yükləmə nümunəsidir. İstifadəçi “Növbəti” və ya “Daha çox yüklə” düymələrini basmır — sistem özü növbəti məlumat hissəsini nə vaxt sorğuşacağını müəyyən edir və yeni qeydləri mövcud siyahıya problemsiz əlavə edir.

Infinite Scroll sosial şəbəkələr sayəsində məşhurlaşdı — Twitter, Instagram və TikTok onu əsas məzmun çatdırma mexanizmi kimi istifadə edir. Nielsen Norman Group (2024) məlumatlarına görə, Infinite Scroll məzmun tətbiqlərində nişanlanmanı 30–50% artırır, çünki idrak yükünü azaldır: istifadəçi növbəti səhifəyə keçmək qərarı verməlidir. Lakin dəqiq naviqasiya tələb edən tapşırıqlarda (axtarış, məhsul müqayisəsi) Infinite Scroll effektivliyi azalda bilər.

Texniki baxımdan sonsuz skroll üç komponentdən ibarətdir: scroll listener (skroll mövqeyini izləyir), threshold (yükləməni tetikləmək üçün siyahının sonuna qədər olan məsafə) və pagination mechanism (API sorğusu və məlumat əlavəsi). Həddin düzgün qurulması kritikdir: çox erkən tetikləmədə (sona 1000 px) istifadəçi lazımsız sorğular alır, çox gec (50 px) — yükləmə fasiləsini görür.

Infinite Scroll necə işləyir: arxitektura və mexanika

Infinite Scroll arxitekturası hadisə modelinə əsaslanır: siyahı komponenti skroll həddinə çatdıqda hadisə yaradır, ViewModel onu emal edir və növbəti məlumat hissəsini yükləmək üçün repozitoriyanı çağırır. Cavab alındıqdan sonra yeni elementlər siyahıya əlavə edilir və UI adapter vasitəsilə yenilənir. Bu zəncir asinxron olmalı və UI iplikini bloklamamalıdır.

Əsas Infinite Scroll alqoritmi dörd addımdan ibarətdir. Başlatma: ekran ilk dəfə açıldıqda ilk məlumat hissəsi yüklənir (səhifə 1 və ya cursor = null). İzləmə: scroll listener istifadəçinin həddə çatıb-çatmadığını yoxlayır — adətən siyahının sonuna 200–500 px. Yükləmə: API-ya paginasiya parametrləri ilə sorğu göndərilir, UI-da yükləmə göstəricisi göstərilir (altbilgidə spinner). Əlavə: yeni elementlər adapterə əlavə edilir, sıçrayışın qarşısını almaq üçün skroll mövqeyi düzəldilir.

Kritik aspekt debounce sorğulardır. İstifadəçi tez sona skroll edərsə, tetik serverdən cavab alınmamış bir neçə dəfə işləyə bilər. Debounce olmadan bu təkrarlanan sorğulara (race condition) səbəb olur. Həll yolu — əvvəlki sorğu tamamlanana qədər yenisini bloklamaqdır. ViewModel-də isLoading bayrağı çoxsaylı çağırışların qarşısını alır: sorğu göndərərkən isLoading = true təyin edin, cavab və ya xəta alındıqda sıfırlayın.

Mobil platformalarda Infinite Scroll üçün xüsusi mexanizmlər istifadə olunur. iOS-da bu, ekrandan kənarda olan hücrələr üçün avtomatik məlumat tələb edən UICollectionView-də prefetchDataSource-dur. Android-də — Google-un Paging 3 Kitabxanası, PagingSource, PagingData və PagingDataAdapter ilə hazır arxitektura təmin edir. Paging 3 şəbəkə və yerli məlumatları birləşdirmək üçün RemoteMediator’ı dəstəkləyir və yükləmə vəziyyətini avtomatik idarə edir.

Cursor-based və offset-based paginasiya

Offset-based paginasiya page və size parametrlərindən istifadə edir: page=2, size=20 21–40 qeydlərini qaytarır. Bu yanaşma tətbiqdə sadədir, lakin əsaslı problemi var — sorğular arasında verilənlər bazasına qeydlər əlavə edilərsə və ya silinərsə, yerdəyişmə pozulur (istifadəçi təkrarlar və ya boşluqlar görür). Yüksək dəyişma tezliyi olan lentlərdə (xeberlər, şerhlər) offset-based paginasiya düzgün nəticələr vermir.

Cursor-based paginasiya son elementin unikal identifikatorundan (kursor) istifadə edir: after=id_12345&limit=20. Server göstərilən kursordan sonrakı 20 qeydi qaytarır. Bu yanaşma əlavə və silmələrdən asılı olmayaraq məlumat ardıcıllığını təmin edir. GraphQL Best Practices (2024) məlumatlarına görə, cursor-based paginasiya məlumatların dinamik dəyişdiyi bütün real-vaxt tətbiqləri üçün tövsiyə olunur.

Yanaşmalar arasında seçim tətbiq növündən asılıdır. Sosial şəbəkələrdə (Instagram, TikTok) — yalnız cursor-based, çünki lent daim yenilənir. Nadir dəyişiklikləri olan kataloqlarda (onlayn mağaza məhsul kateqoriyaları) offset-based paginasiya məqbuldur. Hibrid ssenarilərdə Google şəbəkədən cursor-based paginasiyanı yerli Room bazasından offset-based paginasiya ilə birləşdirən Paging 3 RemoteMediator-u tövsiyə edir.

iOS və Android-də Infinite Scroll tətbiqi

Android-də standart yanaşma Jetpack-dən Paging 3 kitabxanasıdır. PagingSource məlumat mənbəyini (şəbəkə və ya VB) müəyyən edir, PagingData məlumat parçalarını ehtiva edir, PagingDataAdapter isə onları RecyclerView-də göstərir. Paging 3 avtomatik olaraq prefetch məsafəsini, təkrarlama və yeniləməni idarə edir. Şəbəkə ilə inteqrasiya üçün RemoteMediator istifadə olunur: API-dən məlumat yükləyir, Room-da saxlayır və PagingSource-u yeniləmə barədə xəbərdar edir. Google I/O 2024 məlumatlarına görə, Infinite Scroll olan Android tətbiqlərinin 60%-dən çoxu Paging 3 istifadə edir.

Paging 3 əsas tətbiq nümunəsi:

class FeedPagingSource(
    private val api: FeedApi
) : PagingSource<String, Post>() {
    override suspend fun load(
        params: LoadParams<String>
    ): LoadResult<String, Post> {
        val response = api.getFeed(
            cursor = params.key,
            limit = params.loadSize
        )
        return LoadResult.Page(
            data = response.items,
            prevKey = null,
            nextKey = response.nextCursor
        )
    }
}

iOS-da Infinite Scroll tətbiqi üçün UICollectionView prefetchDataSource ilə istifadə olunur. UICollectionViewDataSourcePrefetching protokolu, sistemin müəyyən index paths-lərə skrollu qabaqcadan gördükdə çağırılan collectionView(_:prefetchItemsAt:) metodunu ehtiva edir. Android Paging 3-dən fərqli olaraq, iOS-da daxili paginasiya kitabxanası yoxdur — tərtibatçılar onu əl ilə tətbiq edir və ya RxSwift + NSLayoutConstraint və ya Combine əsaslı pipeline-lar kimi üçüncü tərəf həllərindən istifadə edirlər.

iOS-da prefetch nümunəsi:

extension FeedViewController: UICollectionViewDataSourcePrefetching {
    func collectionView(
        _ collectionView: UICollectionView,
        prefetchItemsAt indexPaths: [IndexPath]
    ) {
        let lastRow = collectionView.numberOfItems(inSection: 0) - 1
        if indexPaths.contains(IndexPath(row: lastRow, section: 0)) {
            viewModel.loadNextPage()
        }
    }
}

SwiftUI onAppear modifikatoru vasitəsilə daha deklarativ yanaşma təmin edir. Tərtibatçı siyahının sonunda ProgressView yerləşdirir və göründükdə növbəti səhifənin yüklənməsini tetikləyir. Apple WWDC 2024 məlumatlarına görə, yeni AsyncSequence və Swift Algorithms API-ləri daxili chunking və debounce operatorları təmin edərək sonsuz skrollun tətbiqini sadələşdirir.

Sonsuz skrollun UX problemləri və onların həlli

Əsas UX problemi — altbilgi və naviqasiyanın itirilməsi. Onlayn mağazalarda istifadəçi tez-tez əlaqə və ya linklər üçün altbilgiyə keçmək istəyir. Sonsuz skroll altbilgini əlçatmaz edir — yükləmə ilə daim aşağı itələyir. Həll yolu — yuxarıya sürətli skroll üçün üzən düymə (FAB) əlavə etmək və ya altbilgini siyahıdan ayrı bərkitmək.

İkinci problem — skroll tarixçəsinin olmaması. İstifadəçi 3-cü mövqedə maraqlı məhsul gördüsə, 50-ciyə qədər skroll etdisə və sonra “Geri” düyməsini basdısa — siyahının əvvəlinə qayıdır və yenidən 50-ci mövqeyə skroll etməlidir. Həll yolu — ViewModel-də skroll mövqeyini saxlamaq və ya Activity/UIViewController səviyyəsində state restoration istifadə etməkdir. iOS mövqeyi bərpa etmək üçün NSUserActivity-ni, Android isə onSaveInstanceState-nı dəstəkləyir.

Üçüncü problem — minlərlə elementdə performans. Virtualizasiya konfiqurasiya edilməyibsə, 500–1000 yüklənmiş elementdən sonra yaddaş istehlakının artması səbəbindən tətbiq yavaşlayır. Həll yolu — yalnız görünən + prefetched hücrələri yaddaşda saxlayan RecyclerView və ya UICollectionView virtualizasiyasından istifadə etməkdir. Köhnə məlumatların dövri təmizlənməsi (N səhifədən uzaq səhifələri silmək) də yükü azaldır.