RxJS Опрос для обновления строк в бесконечном прокрутке

Я наблюдал за событием Мэтью Подвайски на https://www.youtube.com/watch?v=zlERo_JMGCw 29:38

Где он объясняет, как они решили прокрутить по netflix. Если пользователь прокручивает больше данных, поскольку предыдущие данные очищаются и больше добавляются (но прокрутка назад показывает предыдущие данные снова).

Я хотел сделать подобное, но я взял демо-код netflix:

function getRowUpdates(row) {
  var scrolls = Rx.Observable.fromEvent(document, 'scroll');
  var rowVisibilities = 
    scrolls.throttle(50)
      .map(function(scrollEvent) {
        return row.isVisible(scrollEvent.offset);
      })
      .distinctUntilChanged();

  var rowShows = rowrowVisibilities.filter(function(v) {
    return v;
  });
  var rowHides = rowrowVisibilities.filter(function(v) {
    return !v;
  });

  return rowShows
    .flatMap(Rx.Observable.interval(10))
    .flatMap(function() {
      return row.getRowData().takeUntil(rowHides);
    })
    .toArray();
}

Но я немного смущен тем, как передавать новые данные или данные страницы в соответствии с прокруткой здесь. Может кто-то дать небольшое объяснение, как я могу сделать следующее:

  • выберите первый список (я могу это сделать)
  • выберите другой список, когда пользователь прокрутит страницу вниз (используя следующую страницу подкачки)
  • удалить предыдущие извлеченные данные из памяти и выполнить запрос по заказу (прокрутите вверх).

Ответы

Ответ 1

Вот как я буду делать это в общих строках. Если вам это кажется удовлетворительным, я отредактирую и добавлю дополнительные сведения.

Версия 2: (Для первой см. изменения)

Помещения:

  • Тег, содержащий динамический список, будет называться "зоной".
  • Каждая строка списка будет содержаться в другом DIV, который может содержать что угодно.
  • На странице достаточно строк для покрытия зоны.
  • Три константы javascript: numberOfLinesOnFirstLoad, numberOfLinesOnPageLoad, numberOfLinesToLoadAfter
  • Переменные JavaScript для хранения требуемых данных: rows [page #], height [page #], currentPageNumber = 1, maxPageNumber = 0
  • страница #: # - номер страницы
  • rows [page #] должен содержать способ вернуть их из базы данных, а не для реальных объектов DOM.

Шаги/События:

  • Добавить тег зоны.
  • Загрузите строки numberOfLinesOnFirstLoad.
  • Если общая высота высоты нижней высоты строк умножается на три, тогда загрузите numberOfLinesToLoadAfter строк. Повторите шаг 3, если строки добавлены, в противном случае перейдите к шагу 4.
  • maxPageNumber + = 1. Найдите следующие строки, заполняющие всю зону. Добавьте эти строки в строки [ "page" + maxPageNumber] (в виде массива). Вычислите высоту и добавьте ее в высоту [ "page" + maxPageNumber].
  • Повторите шаг 4 до тех пор, пока не будет больше строк, а затем перейдите к шагу 6. ​​
  • При прокрутке вниз и странице1 (это означает, что последний элемент строк [ "page1" ]) не отображается, добавьте еще один ниже: page4.
  • maxPageNumber + = 1. Загрузите строки numberOfLinesOnPageLoad.
  • Если общая высота новых верхних уровней высоты строк, то числоOfLinesToLoadAfter строк. Повторите шаг 8, если строки добавлены, в противном случае добавьте новые высоты строк в высоту [ "page" + maxPageNumber], а новые строки - в виде массива в строках [ "page" + maxPageNumber] и перейдите к шагу после ввода этого значения (так что либо 9 или 11).
  • Продолжая прокрутку вниз, если страница2 не видна, удалите элементы page1 из DOM и отрегулируйте положение прокрутки, удалив page1.height(height [ "page1" ]).
  • Загрузите страницу 5 (шаги 7 и 8).
  • Итак, в зоне, где страницы2 и страница5 не видны, есть страница2 - page5. Если страница 3 полностью видна, чем страница4, в противном случае видны части страниц 3 и стр. 4. (Просто указать возможности, но не важно).
  • Когда прокрутка вверх и страница2 начинает быть видимой (так что последний элемент строк [ "page2" ]), загрузите страницу1 с помощью строк [ "page1" ], добавьте page1.height(height [ "page1" ]) в прокрутить позицию и удалить страницу5 из DOM. Здесь вы можете либо удалить его из переменных rows && высот и maxPageNumber - = 1, но вы также можете сохранить их, чтобы перезагрузка этой страницы выполнялась в одном процессе (поэтому загрузка страницы подразумевала бы проверку того, существует ли определение страницы в этих переменных).