Как делается бесконечная прокрутка? Я знаю, что через AJAX, но как там указывается с какого по какой пост надо вытянуть и т.п.
3 ответа
Это называется Cursor Pagination (курсорная пагинация).
Пример:
У вас есть сервер и бд в которой есть 100 постов. Сервер отдает по 10 постов на страницу. Нумеруемая пагинация делает запрос к серверу и в запросе мы передаем номер страницы для которой хотим получить 10 постов. В курсорной пагинации все точно так же, только мы передаем в запросе не любую страницу, а одну за другой:
- В клиентском приложении у вас должен быть список постов:
postsList
и номер текущей страницы:currentPage
. - При загрузке страницы, делается запрос на получение десятка постов.
Когда получили ответ с постами, заносим их в
postsList
и запоминаем страницуcurrentPage = 1
. - Отлавливаем событие, что пользователь прокрутил список до последнего
поста и делаем запрос на получение десятка постов со
страницы
currentPage + 1
. - Полученными данными расширяем
postsList
(добавляем в конец списка). Запоминаем страницу:currentPage=2
.
Вот собственно и все. Пункты 3 и 4 выполняются до тех пор пока не загрузятся все 100 постов.
-
1Отмечу, что вместо
currentPage
может быть лучше использовать что-то типаlastPostId
с запросом к БД типаwhere id < lastPostId
, (или аналогичный вариант с датой публикации), так дубликаты исключаются (если в период между запросами появится новый пост) и нагрузка на БД меньше Commented 26 февр. 2016 в 21:57 -
@andreymal Можно было бы сделать подобный запрос, но не будет достаточно указать
id < lastPostId
. Вы программируете на Python. Django? Просто зачем изобретать велосипед, когда уже есть готовые решения. Используя Django REST framework простым запросом с номером страницы в параметрах, можно получить необходимые данные:https://my_host/posts/?page=123
– MaxCommented 27 февр. 2016 в 8:58 -
Затем, что предложенный велосипед проще и эффективнее, конечно же. Запрос к БД с
offset (page-1)*count, count
- не лучшее решение для бесконечной прокрутки. Commented 27 февр. 2016 в 11:02 -
Дайте развернутый ответ на этот вопрос со своим решением. Это не форум для дискуссий.– MaxCommented 27 февр. 2016 в 11:18
-
1Не хочу, он аналогичен вашему, только
lastPostId
вместоcurrentPage
:) Commented 27 февр. 2016 в 11:19
ну вообще люди передают номер страницы, через POST, или GET не важно, просто запоминают какая страница на данный момент открыта и делают ++ при достижении низа скроллером.
-
-
тут видимо имеется вввиду, что теоретички в яваскрипт передается текущее выведенное количество и при достижении низа страницы посылается запрос <текущее количество>+<следующая пачка>– thunderCommented 25 мар. 2013 в 9:33
Пример реализации с подробными комментариями:
/*
* На сколько страниц автоматически прокручиваем до остановки
*/
var maxPages = 3;
/*
* За сколько до конца страницы включаем прокрутку
*/
var scrollBufferRatio = 1 / 3;
/*
* Где находится область для дополнения (содержимое)
*/
var elementContainerSelector = '.messages';
/*
* Что делать если не найден новое содержимое
*/
var elementFindingErrorHandler = function() {
throw "Could not find " + elementContainerSelector;
};
/*
* Названия события которое можно изменить
* если есть несколько областей прокрутки
*/
var eventName = 'scroll.toInfinity';
/*
* Где находится выбор страниц для перехода
*/
var pagerSelector = '.pager';
/*
* Где найти ссылку на следующую страницу
*/
var nextPageSelector = '.pager .nextpage';
var $window = $(window);
// инициализируем при загрузке страницы
var $elementContainer;
var topOffset = 0,
scrollBuffer = 1,
pageCounter = 1;
var eventProcessor = function(finished) {
// позиция прокрутки когда должна сработать загрузка
// считается от фактической высоты содержимого
var triggerPosition = $elementContainer.height()
+ topOffset - scrollBuffer;
// текущая позиция прокрутки по нижней части окна
var scrollPosition = $window.scrollTop() + $window.height();
// еще не дошли до нужной точки, ничего не делаем
if (scrollPosition < triggerPosition) {
// но ждём дальше
finished();
return true;
}
// пролистали достаточное число страниц
if (pageCounter >= maxPages) {
// дадим выбор пользователю листать ли дальше
$(pagerSelector).show();
// не перезапускаем загрузку
return true;
}
// если следующей страницы нет...
var $nextPage = $(nextPageSelector);
if ($nextPage.length == 0) {
// то и загружать дальше нечего
return true;
}
$.get($nextPage.attr('href'), function(data) {
var $data = $(data);
// найдем содержимое в следующей странице
var $newContent = $data.find(elementContainerSelector);
if ($newContent.length == 0) {
// если элемент не найден, он может быть корневым
$newContent = $data.filter(elementContainerSelector);
}
// если ничего не найдено, то это конкретно ошибка
if ($newContent.length == 0) {
elementFindingErrorHandler();
}
// содержимое из следующей страницы допишем
// к содержимому страницы в окне
$elementContainer.append($newContent.first().html());
// найдем выбор страниц на следующей странице
var $newPager = $data.find(pagerSelector);
if ($newPager.length == 0) {
// корневой элемент тоже поищем
$newPager = $data.filter(pagerSelector);
}
// заменим выбор страниц новым
var newPager = $newPager.first().html();
// и скроем его пока не будет нужен
$(pagerSelector).html(newPager).hide();
}).always(function() {
pageCounter += 1;
// по окончании загрузки снова следим за прокруткой
finished();
});
};
var eventTimeout = 0;
var eventHandler = function() {
// событие на прокрутку должно сработать только один раз
$window.unbind(eventName);
clearTimeout(eventTimeout);
eventTimeout = setTimeout(function() {
// возьмем небольшую паузу чтобы не считать оставшиеся
// пиксели при каждом событии прокрутки
eventProcessor(function() {
// после окончания загрузки снова ждем прокрутки
$window.bind(eventName, eventHandler);
});
}, 100);
};
$(function() {
$elementContainer = $(elementContainerSelector);
// расстояния до элемента от верха экрана
topOffset = $elementContainer.offset().top;
// зададим пропорционально изначальной высоте
scrollBuffer = $elementContainer.height() * scrollBufferRatio;
$window.bind(eventName, eventHandler);
});
Всё это лучше вызывать в замыкании чтобы не сорить в window
.