Рубрики
Без рубрики

React-Simple-Infinite-loading v1 выходит 🎉

React-Window является потрясающим инструментом Но это может быть немного многословным при внедрении бесконечного загрузки в список …. Теги с реагированием, JavaScript, Showdev, WebDev.

React-window это потрясающий инструмент Но это может быть немного многословным при внедрении бесконечного загрузки списка. Вот и Пример Отказ React-Simple-Infinite-loading Компонент, который обрабатывает сложность кода для вас. Это обертка вокруг трех библиотек из Брайан Вон :

  • React-window сделано для демонстрации эффективных больших списков. Он создает только компоненты для видимых элементов и узлов повторного использования.
  • React-Window-Infinite-погрузчик это HOC, которая загружает элементы, когда пользователь прокручивает список
  • React-Virualized-Auto-Sizer Помогает вам отобразить свой список, чтобы он соответствует пространству, доступным в его родительском контейнере.

V1 отсутствует!

Компонент теперь имеет полный набор функций:

  • Загрузите элементы, так как пользователь прокручивается вниз
  • Используйте внутренние методы для прокрутки программно или сбросить кэшированные элементы
  • Переопределить стиль Scrollbar по умолчанию

использование

Давайте пройдем минимальный пример.

import React from 'react'

import InfiniteLoading from 'react-simple-infinite-loading'

function Example({ items, fetchMore, hasMore }) {
  return (
    

      
        {items.map(item => 
{item}
)}
      
    

  )
}

React-Simple-Infinite-loading Требуется четыре свойства:

  • дети : Это должен быть массив узлов JSX.
  • болееmereTems : Это свойство определяет, достиг этого пользователя конца списка Так что мешает ему прокрутить дальше.
  • ItemHeight : Обязательно оптимизировать количество представленных элементов и определить, нужно ли загружать больше строк.
  • нагрузка болееmoreTems : Функция обратного вызова Комнан будет вызывать, когда необходимо загрузить больше строк.

Я Сюда нагрузка болееmoreTems Функция реализации специально по назначению, поскольку это зависит от вашего контекста. Это может быть вызовов, запрос GraphQL, доступ к базе данных, все, что вы хотите. Вы можете увидеть полный пример, используя Star Wars API в Документация Отказ

Переопределить стиль Scrollbar по умолчанию

React-Simple-Infinite-loading использовать React-Custom-Scrollbars под капотом, чтобы переопределить родной стиль прокрутки. Вам нужно добавить опоры CustomScrollbar Чтобы включить это.

import React from 'react'

import InfiniteLoading from 'react-simple-infinite-loading'

function Example({ items, fetchMore, hasMore }) {
  return (
    

      
        {items.map(item => 
{item}
)}
      
    

  )
}

Отображение заполнителя при загрузке больше строк

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

import React from 'react'

import InfiniteLoading from 'react-simple-infinite-loading'

function Example({ items, fetchMore, hasMore }) {
  return (
    

      Loading...
}
      >
        {items.map(item => 
{item}
)}
) }

Если вы хотите иметь заполнитель по ряду, которые будут загружены, вам необходимо предоставить дополнительное свойство itemsCount. (Это работает только, если вы заранее знаете количество строк). Существует аналог, вам нужно будет иметь более тонкую реализацию нагрузка болееmoreTems Перезвони. Эта функция принимает в качестве параметра A Запустить индекс и конечный индекс строк, которые необходимо загрузить.

Позвоните внутренние методы

React-window и React-Window-Infinite-погрузчик Раскрывает несколько методов для манипулирования списком программно. Вы можете использовать его через REF.

У вас есть доступ к тремя методам:

  • Scrollto (Scrolloffset: номер): пустота – Прокрутите до указанного смещения.
  • ScrollToItem (индекс: номер, выровнять:): пустота – Прокрутите до указанного элемента.
  • ResetLoadmoreitemscache (): void – Очистить ранее загруженные предметы из кэша.

Вот пример с Scrollto метод.

function Example({ items, fetchMore, hasMore }) {
  const ref = React.useRef()
  const scrollToTop = () => {
    if (ref.current) {
      ref.current.scrollTo(0)
    }
  }

  return (
    <>
      
      

        
          {items.map(item => 
{item}
)}
        
      

    
  )
}

Если вам интересно, не стесняйтесь, чтобы попробовать!

Репозиторий: https://github.com/frinyvonnick/react-simple-infinite-loading

Обратная связь и вклад ценится 🙏 Пожалуйста, твитги мне, если у вас есть какие-либо вопросы @YVONNICKFRIN Действительно

Надеюсь, это поможет!

Оригинал: “https://dev.to/yvonnickfrin/react-simple-infinite-loading-v1-is-out-439f”

Читайте ещё по теме: