Реактивизированный InfiniteLoader в обоих направлениях, сверху и снизу

Question

Как сделать бесконечную прокрутку в обе стороны, вверх и вниз. Я использую InfiniteLoader и список, оба являются компонентами с виртуальной реакцией. У меня есть список временных меток с начальным диапазоном даты и времени. Оттуда список должен быть бесконечным в обоих направлениях. В настоящее время прокрутка вниз до конца списка вызовет функцию _loadMoreRows(). Тем не менее, я хотел бы вызвать _loadMoreRows () с той же функциональностью при прокрутке в направлении вверх.

Answer 1

У меня сейчас работает:) Все хорошо. threshold опора <InfiniteLoader> определяет пороговое количество индексов перед началом / концом List когда нужно предварительно выбирать данные, т.е. запускать _loadMoreRows(),

Первый и последний элемент в this.state.items должны иметь свои соответствующие loadedRowsMap установлен в undefined после первоначальной выборки данных.

    const items = _getItems(); // fetch items
    const rowCount = items.length;
    const loadedRowsMap = [];
    _.map(this.state.loadedRowsMap,(row,index)=>{
      const status = (index===0 || index===rowCount-1) ? undefined : STATUS_LOADED;
      loadedRowsMap.push(status)});
    scrollToIndex = parseInt(rowCount/2,10);
    this.setState({
      items, rowCount, loadedRowsMap, scrollToIndex,
    });

Перед отображением списка scrollToIndex опора <List> компонент должен быть установлен в середине списка, т.е. rowCount/2, Это число должно удовлетворять уравнению

    0 + threshold < scrollToIndex < rowCount - 1 - threshold.

функция _isRowLoaded() будет проверять loadedRowsMap[index], Если установлено STATUS_LOADED или же STATUS_LOADING (внутренние константы, используемые внутри InfiniteLoader) это не сработает _loadMoreRows(), Если установлено undefinedтогда это сработает _loadMoreRows(),

С этой настройкой срабатывает _loadMoreRows() работает в обоих направлениях прокрутки, вверх и вниз.