Defilare infinită (defilare): argumente pro și contra. Defilarea infinită a paginilor: ajută sau dăunează

11.08.2019 Windows 8

A! Împărțirea conținutului în pagini cu numere este o schemă clasică de paginare, intuitivă și familiară utilizatorilor. Cu toate acestea, recent tot mai multe site-uri încep să „pună în practică” acest tip de navigare pe pagină precum Infinite Scroll. Chiar și giganți precum Google, Facebook și VKontakte nu au făcut excepție. Desigur, acest tip de paginare are argumente pro și contra, dar aceasta este o altă conversație. În acest tutorial ne vom uita la cum să implementăm o astfel de navigare.

Cum functioneaza?!

Da, totul este foarte simplu, dacă utilizatorul a derulat deja un anumit număr de postări și se află în partea de jos a paginii, atunci mai multe mesaje sunt încărcate cu o ușoară întârziere. Pentru a face acest lucru, folosind $.post formăm o cerere POST către pagina pentru descărcarea datelor din baza de date (fișier .php), structura HTML a înregistrărilor este formată în același fișier. După care, structurând marcajul HTML, datele sunt returnate în script și plasate pe pagină.

Procesul de determinare a poziției utilizatorului pe pagină:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// Dacă derularea este activată
dacă ($settings.scroll == true ) (
// .. iar utilizatorul derulează pagina
$(window).scroll(function() (

// Verificați dacă utilizatorul se află în partea de jos a paginii
dacă ($(window).scrollTop() + $(window).height() > $this.height() && !ocupat) (

// Proces în curs
ocupat
$aceasta.).html) ;

// Rulați o funcție pentru a prelua date cu o întârziere stabilită
// Acest lucru este util dacă aveți conținut în subsol
setTimeout(funcția () (

Obțineți date() ;

) , $settings.delay ) ;

}
} ) ;
}

Probabil ați observat utilizarea variabilelor, a parametrilor pluginului, ca să spunem așa, mai multe despre ele puțin mai târziu. Funcția de solicitare AJAX pentru un fișier PHP getData() arată astfel:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// Funcția de solicitare AJAX
funcția getData() (

// Formarea unei cereri POST către ajax.php
$.post("ajax.php" , (

Acțiune: „scrollpagination”
număr: $settings.nop,
offset : offset,

) , function (data) ) .html ($initmessage) ;

// Dacă datele returnate sunt goale, raportați-le
if (date).html($settings.error);
}
altfel(
// Offset-ul crește
offset = offset+ $settings.nop ;

// Adăugați datele primite la conținutul DIV
$this.find(".content").append(date);

// Procesul finalizat
ocupat = fals ;
}

} ) ;

Fișierul AJAX.php

Scriptul PHP pentru interogarea bazei de date și generarea structurii mesajelor de ieșire poate părea în orice mod acceptabil pentru dvs. Tot ce trebuie să faceți este să luați câteva informații din baza de date MySQL la alegere. Următorul este un fișier ajax.php foarte simplu care preia informații dintr-o bază de date MySQL și afișează conținutul cu un titlu și un link.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22