Это проще, чем ты думаешь
В последнее время это повсюду. Бесконечная прокрутка - источник гнева при обновлении и напоминание о бесчисленных часах, потраченных впустую, пытаясь заснуть.
Конечно, при таком большом использовании вы можете захотеть включить его в свое приложение.
Идея довольно проста:
- Создайте прослушиватель событий, который смотрит, где вы в данный момент находитесь внутри объекта окна.
- Убедитесь, что это не будет слишком для прослушивания, потому что вам нужно, чтобы отображалось только небольшое количество новых элементов, а не несколько тысяч.
Функциональные компоненты
1. Начнем с добавления прослушивателя событий.
Используя функциональные компоненты, мы должны ввести useEffect с пустым массивом в качестве второго аргумента, который, по сути, является новым componentDidMount в функциональных компонентах.
Теперь нам нужно создать функцию handleScroll. Просто добавьте это в loadMore в классе и оставьте как есть для функционала.
Есть много способов создать handleScroll функцию - приведенный выше прослушивает текущее местоположение innerHeight и scrollTop и проверяет, не превышает ли оно offsetHeight.
Он сработает только тогда, когда вы прокрутите за нижнюю часть, заставляя браузер подтянуть всю страницу легким эластичным движением.
2. Не прислушиваться. Какие?
Если вы посмотрите на то, как мы разработали наш прослушиватель событий, loadMore сработает много раз, прежде чем вы сможете даже перевести дух. Итак, мы делаем небольшую резервную копию и создаем useState, который сообщит нам, нужно ли / когда loadMore - с небольшим буфером, чтобы создать некоторую задержку между событием и загрузкой.
Теперь первый созданный нами прослушиватель событий будет только setIsLoading(true).
Мы добавили еще один прослушиватель событий в строку 11, который будет отслеживать изменения в isLoading. Когда isLoading изменяется, он проверяет, соответствует ли isLoading true, а затем загружает другие элементы.
Теперь важно отметить, что isLoading должен изменяться на true, только если он был false до того, как вы достигли нижней части страницы. Таким образом, прослушиватель событий useEffect должен вызываться только один раз, когда вы достигаете дна.
Компоненты класса
1. Добавление прослушивателя событий
В функциональной модели мы добавили начальный прослушиватель событий в
useEffect(() => {},[]), который по сути является componentDidMount.
Затем проверьте, находится ли пользователь внизу страницы.
2. Слишком много внимания
Теперь мы получаем ту же проблему, что и раньше (когда мы загружали слишком много).
Итак, мы создаем состояние под названием isLoading. Если isLoading истинно, мы возвращаемся и выходим из функции, а _25 _ / _ 26 _ / _ 27_ вообще не проверяем.
Обязательно setState({ isLoading: false}) первым в loadMore.
Заключение
Все это основано на предположении, что вы строите его с нуля. Но если вы хотите выбрать более простой путь и просто импортировать библиотеку, это тоже несложно.
