Бесконечная прокрутка на JavaScript

Бесконечная прокрутка на JavaScript
Метки: / / /

В этой статье мы разберём как делается бесконечная прокрутка на JavaScript, ещё не много разберём пагинацию на PHP.

Для тех кто не знает, бесконечна прокрутка это когда вы прокручиваете и контент сам погружается, для этого используются AJAX запросы, обычно в интернете написано как сделать это с помощью библиотеки JQuery, мы же будем использовать Axios.js.

Back-end:

Первым делом нужно нужно сделать back-end, то есть серверную часть, мы её делать будем на языке программирования PHP.

Тут я не буду особо говорить про код, так как это обычная пагинация на PHP, которую мы уже делали, если вам что-то не понятно, то посмотрите статью по этой ссылке.

Единственное расскажу это про массив $data, в котором мы храним все данные, в первом ключе posts храним элементы или записи в нашем случае, во next, храним boolean тип данных, если true, значит страницы ещё есть, а если false, значит нет, это нужно что бы в JavaScript не отправлял больше запросы, когда выведется все данные.

Также весь этот массив превращаем в JSON формат, это нужно так как JS не способен воспринимать PHP массивы, мы делаем понятно для него.

Client:

Теперь перейдём клиентской части сайта, для начала сделаем не большой HTML блок с классом data, куда будем выводить данные.

Также мы подключаем через CDN библиотеку axios.js, ещё JavaScript файл в котором будет основной код.

Теперь перейдём во файл где весь основной код, в нём первый делом объявляем нужные переменные.

Тут мы получаем элемент куда будем выводить данные, потом номер страницы, и переменная для обозначения есть ли следующая страница.

Тут мы отправляем GET запрос получаем ответ, делаем цикл и добавляем блоки в наш элемент.

Эта часть кода похожа на предыдущею, только на этот раз мы у документа мы отслеживаем скролл, внутри события проверяем условие, дошёл ли скролл до конца и есть ли ещё страницы, если всё в порядке, то отправляем GET запрос.

Там проверяем, есть ли ещё страницы, если нет, то меняем значение переменной bePages на false, значит страниц больше нет, дальше строим цикл, в нём в наш блог для данных добавляем новые элементы.

Эта вся программа была, таким образом  в js делается подгрузка контента при прокрутке.

Вывод:

В этой статье вы прочитали как делается бесконечная прокрутка на языке JavaScript, ну и не много PHP.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую:

55058653