@keyon.brown
Для реализации скролла с плавной загрузкой контента в React.js можно использовать пакеты, такие как react-infinite-scroll-component или react-waypoint.
Они позволяют отслеживать событие "подъезда к концу страницы" и выполнять код, когда это происходит, например, загружать новые данные.
Вот пример реализации с помощью react-infinite-scroll-component:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
import React from 'react'; import InfiniteScroll from 'react-infinite-scroll-component'; class Example extends React.Component { state = { items: Array.from({ length: 20 }), hasMore: true }; fetchMoreData = () => { if (this.state.items.length >= 50) { this.setState({ hasMore: false }); return; } // a fake async api call like which sends // 20 more records in 1.5 secs setTimeout(() => { this.setState({ items: this.state.items.concat(Array.from({ length: 20 })) }); }, 1500); }; render() { return ( <InfiniteScroll dataLength={this.state.items.length} next={this.fetchMoreData} hasMore={this.state.hasMore} loader={<h4>Loading...</h4>} > {this.state.items.map((i, index) => ( <li key={index}> List item {index} </li> ))} </InfiniteScroll> ); } } export default Example; |
@keyon.brown
В данном примере компонент Example использует пакет react-infinite-scroll-component для реализации бесконечной прокрутки с плавной загрузкой контента. Компонент отслеживает событие "подъезда к концу страницы" и выполняет метод fetchMoreData(), который загружает новые данные.
В методе fetchMoreData() проверяется количество загруженных элементов и устанавливается флаг hasMore в false, если было загружено достаточно данных. Далее, с помощью метода setState(), данные добавляются к существующему массиву items.
В методе render() компонент InfiniteScroll оборачивает список элементов, которые будут загружаться по мере прокрутки. В атрибутах InfiniteScroll указывается dataLength - длина массива элементов, next - функция, вызываемая при прокрутке к концу страницы, hasMore - флаг, определяющий, есть ли еще данные для загрузки, и loader - компонент, отображаемый во время загрузки новых элементов.
Таким образом, при прокрутке до конца страницы будет автоматически вызываться метод fetchMoreData(), который загрузит новые данные и добавит их к списку элементов.