В этой статье мы разберём как делается бесконечная прокрутка на JavaScript, ещё не много разберём пагинацию на PHP.
Для тех кто не знает, бесконечна прокрутка это когда вы прокручиваете и контент сам погружается, для этого используются AJAX запросы, обычно в интернете написано как сделать это с помощью библиотеки JQuery, мы же будем использовать Axios.js.
Back-end:
Первым делом нужно нужно сделать back-end, то есть серверную часть, мы её делать будем на языке программирования PHP.
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | // Подключаем файл для подключения БД require "db.php"; // Проверяем есть ли GET запрос с номером страницы if (isset($_GET['pageno'])) { // Перемешаем номер страницы переменную $pageno = $_GET['pageno']; } // Назначаем количество элементов $size_page = 10; // Назначаем с какого элемента начинать отсчёт $offset = ($pageno-1) * $size_page; // SQL запрос для получения количество элементов $pages_sql = "SELECT COUNT(*) FROM `posts`"; // Отправляем SQL запрос $result = mysqli_query($db, $pages_sql); // Получаем номер количество элементов $total_rows = mysqli_fetch_array($result)[0]; // Получаем количество страниц $total_pages = ceil($total_rows / $size_page); // SQL запрос для получения элементов $sql = "SELECT * FROM `posts` LIMIT $offset, $size_page"; // Отправляем SQL запрос $res_data = mysqli_query($db, $sql); // Делаем массив $data = array( 'posts' => array(), // Массив для хранения элементов 'next' => true, // есть ли следующая страница ); // Проверяем следующий страницу if ($pageno >= $total_pages) { // Если нет, то назначаем false $data['next'] = false; } // Получаем каждый элемент while($row = mysqli_fetch_array($res_data)) { // Добовляем каждый элемент в массив для элементов array_push($data['posts'], ['title' => $row['title'], 'text' => $row['text']]); } // кодируем массив в JSON $data_json = json_encode($data); // Отправляем JSON echo $data_json; // Закрываем БД mysqli_close($db); |
Тут я не буду особо говорить про код, так как это обычная пагинация на PHP, которую мы уже делали, если вам что-то не понятно, то посмотрите статью по этой ссылке.
Единственное расскажу это про массив $data
, в котором мы храним все данные, в первом ключе posts
храним элементы или записи в нашем случае, во next
, храним boolean тип данных, если true
, значит страницы ещё есть, а если false
, значит нет, это нужно что бы в JavaScript не отправлял больше запросы, когда выведется все данные.
Также весь этот массив превращаем в JSON формат, это нужно так как JS не способен воспринимать PHP массивы, мы делаем понятно для него.
Client:
Теперь перейдём клиентской части сайта, для начала сделаем не большой HTML блок с классом data
, куда будем выводить данные.
1 2 3 4 | <div class=data></div> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script src="./script/script.js"></script> |
Также мы подключаем через CDN библиотеку axios.js, ещё JavaScript файл в котором будет основной код.
Теперь перейдём во файл где весь основной код, в нём первый делом объявляем нужные переменные.
1 2 3 4 5 6 | // Получаем элемент для вывода данных let data = document.querySelector(".data"); // Номер страницы let numPage = 1; // Есть ли ещё страницы let bePages = true; |
Тут мы получаем элемент куда будем выводить данные, потом номер страницы, и переменная для обозначения есть ли следующая страница.
1 2 3 4 5 6 7 8 9 10 11 | // Делаем GET запрос axios.get('http://testphp/pagination.php?pageno=' + numPage).then(res => { // Строим цикл for for(let i = 0; i < 10; ++i) { // Добавляем элемент в дата data.innerHTML += `<div class="card-body"> <h5 class="card-title">${res.data.posts[i].title}</h5> <p class="card-text">${res.data.posts[i].text}</p> </div>` } }); |
Тут мы отправляем GET запрос получаем ответ, делаем цикл и добавляем блоки в наш элемент.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | // Событие скролл document.addEventListener('scroll', (e) => { // Проверяем условия if (document.body.scrollHeight - document.body.scrollTop === document.body.clientHeight && bePages == true) { // Увеличиваем номер страницы numPage++; // Отправляем GET запрос axios.get('http://testphp/pagination.php?pageno=' + numPage).then(res => { // Проверяем есть ли следующая страница if (res.data.next === false) { // Если нет то // В переменную кладём false bePages = false; } // Создаём цикл for(let i = 0; i < 10; ++i) { // Кладём новый элемент в наш блок data.innerHTML += `<div class="card-body"> <h5 class="card-title">${res.data.posts[i].title}</h5> <p class="card-text">${res.data.posts[i].text}</p> </div>` } }); } }) |
Эта часть кода похожа на предыдущею, только на этот раз мы у документа мы отслеживаем скролл, внутри события проверяем условие, дошёл ли скролл до конца и есть ли ещё страницы, если всё в порядке, то отправляем GET запрос.
Там проверяем, есть ли ещё страницы, если нет, то меняем значение переменной bePages
на false
, значит страниц больше нет, дальше строим цикл, в нём в наш блог для данных добавляем новые элементы.
Эта вся программа была, таким образом в js делается подгрузка контента при прокрутке.
Вывод:
В этой статье вы прочитали как делается бесконечная прокрутка на языке JavaScript, ну и не много PHP.