اسکرول بی نهایت (پیمایش): جوانب مثبت و منفی. پیمایش بی نهایت صفحه: کمک می کند یا آسیب می رساند

11.08.2019 ویندوز 8

آ! تقسیم محتوا به صفحات با اعداد یک طرح صفحه بندی کلاسیک است که برای کاربران بصری و آشنا است. با این حال، اخیراً سایت‌های بیشتری شروع به «عملی کردن» این نوع پیمایش صفحه مانند Infinite Scroll کرده‌اند. حتی غول هایی مانند گوگل، فیس بوک و VKontakte نیز از این قاعده مستثنی نبودند. به طور طبیعی، این نوع صفحه بندی مزایا و معایب خود را دارد، اما این بحث دیگری است. در این آموزش نحوه اجرای چنین ناوبری را بررسی خواهیم کرد.

چگونه کار می کند؟!

بله، همه چیز بسیار ساده است، اگر کاربر قبلاً تعداد مشخصی پست را اسکرول کرده باشد و در انتهای صفحه باشد، پیام های بیشتری با کمی تاخیر بارگذاری می شوند. برای انجام این کار، با استفاده از $.post یک درخواست POST به صفحه برای دانلود داده ها از پایگاه داده (فایل php) تشکیل می دهیم، ساختار HTML رکوردها در همان فایل تشکیل می شود. پس از آن، با ساختاربندی نشانه گذاری HTML، داده ها به اسکریپت برگردانده شده و در صفحه قرار می گیرند.

فرآیند تعیین موقعیت کاربر در صفحه:

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

// اگر پیمایش فعال باشد
اگر ($settings.scroll == true ) (
// .. و کاربر صفحه را اسکرول می کند
$(window).scroll(function() (

// بررسی کنید که آیا کاربر در پایین صفحه است یا خیر
if ($(window).scrollTop() + $(window).height() > $this.height() && !busy) (

// فرآیند در حال انجام است
مشغول
$this.).html) ;

// تابعی را برای واکشی داده ها با تاخیر تنظیم شده اجرا کنید
// اگر محتوایی در پاورقی داشته باشید مفید است
setTimeout(تابع () (

GetData() ;

) ، $settings.delay ) ;

}
} ) ;
}

احتمالاً متوجه استفاده از متغیرها، پارامترهای پلاگین شده اید، به اصطلاح، کمی بعد بیشتر در مورد آنها. تابع درخواست AJAX برای یک فایل PHP ()getData به شکل زیر است:

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

// تابع درخواست AJAX
تابع getData() (

// تشکیل یک درخواست POST به ajax.php
$.post("ajax.php" , (

اقدام: "صفحه‌بندی پیمایشی"
شماره: $settings.nop،
افست: افست،

), تابع (داده) ) .html ($initmessage) ;

// اگر داده های برگشتی خالی است، آن را گزارش کنید
if (data).html($settings.error);
}
دیگر(
// افست افزایش می یابد
offset = offset+ $settings.nop ;

// داده های دریافتی را به محتوای DIV اضافه کنید
$this.find(.content").append(data);

// فرآیند تکمیل شد
مشغول = نادرست ;
}

} ) ;

فایل AJAX.php

اسکریپت PHP برای پرس و جو از پایگاه داده و ایجاد ساختار پیام های خروجی می تواند به هر شکلی برای شما قابل قبول باشد. تنها کاری که باید انجام دهید این است که اطلاعاتی را از پایگاه داده MySQL انتخابی خود بگیرید. فایل زیر یک فایل ajax.php بسیار ساده است که اطلاعات را از پایگاه داده MySQL می گیرد و محتوا را با عنوان و لینک نمایش می دهد.

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