11

Как делается бесконечная прокрутка? Я знаю, что через AJAX, но как там указывается с какого по какой пост надо вытянуть и т.п.

3 ответа 3

7

Это называется Cursor Pagination (курсорная пагинация).

Пример:
У вас есть сервер и бд в которой есть 100 постов. Сервер отдает по 10 постов на страницу. Нумеруемая пагинация делает запрос к серверу и в запросе мы передаем номер страницы для которой хотим получить 10 постов. В курсорной пагинации все точно так же, только мы передаем в запросе не любую страницу, а одну за другой:

  1. В клиентском приложении у вас должен быть список постов: postsList и номер текущей страницы: currentPage.
  2. При загрузке страницы, делается запрос на получение десятка постов. Когда получили ответ с постами, заносим их в postsList и запоминаем страницу currentPage = 1.
  3. Отлавливаем событие, что пользователь прокрутил список до последнего поста и делаем запрос на получение десятка постов со страницы currentPage + 1.
  4. Полученными данными расширяем postsList(добавляем в конец списка). Запоминаем страницу: currentPage=2.

Вот собственно и все. Пункты 3 и 4 выполняются до тех пор пока не загрузятся все 100 постов.

7
  • 1
    Отмечу, что вместо currentPage может быть лучше использовать что-то типа lastPostId с запросом к БД типа where id < lastPostId, (или аналогичный вариант с датой публикации), так дубликаты исключаются (если в период между запросами появится новый пост) и нагрузка на БД меньше
    – andreymal
    Commented 26 февр. 2016 в 21:57
  • @andreymal Можно было бы сделать подобный запрос, но не будет достаточно указать id < lastPostId. Вы программируете на Python. Django? Просто зачем изобретать велосипед, когда уже есть готовые решения. Используя Django REST framework простым запросом с номером страницы в параметрах, можно получить необходимые данные: https://my_host/posts/?page=123
    – Max
    Commented 27 февр. 2016 в 8:58
  • Затем, что предложенный велосипед проще и эффективнее, конечно же. Запрос к БД с offset (page-1)*count, count - не лучшее решение для бесконечной прокрутки.
    – andreymal
    Commented 27 февр. 2016 в 11:02
  • Дайте развернутый ответ на этот вопрос со своим решением. Это не форум для дискуссий.
    – Max
    Commented 27 февр. 2016 в 11:18
  • 1
    Не хочу, он аналогичен вашему, только lastPostId вместо currentPage :)
    – andreymal
    Commented 27 февр. 2016 в 11:19
2

ну вообще люди передают номер страницы, через POST, или GET не важно, просто запоминают какая страница на данный момент открыта и делают ++ при достижении низа скроллером.

2
  • а если без страниц делать?
    – Zow
    Commented 25 мар. 2013 в 9:30
  • тут видимо имеется вввиду, что теоретички в яваскрипт передается текущее выведенное количество и при достижении низа страницы посылается запрос <текущее количество>+<следующая пачка>
    – thunder
    Commented 25 мар. 2013 в 9:33
0

Пример реализации с подробными комментариями:

/*
 * На сколько страниц автоматически прокручиваем до остановки
 */
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.

Взято отсюда, лицензия MIT.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.