169 похожих чатов

Добрый день, я пытаюсь добавить что-то похожее на infinite scroll к

списку элементов с pagination. надо чтобы дойдя до последнего элемента, оно перешло на следующую "страницу".
<div className={cn("w-col w-col-4", styles.info_container)} >
<div className={styles.property_container} onScroll={()=> {
console.log('scrolling!');
}}>
{pagedListings.map((property) => (
<Property
key={property.id}
id={property.id}
price={property.original_price}
imgUrl={property.medium_photo_url}
address={property.address}
permalink={property.permalink}
bedRooms={property.total_bedrooms}
bathRooms={property.total_full_baths}
acre={property.acre}
handleClick={handleClick}
/>
))}
{!pagedListings.length && (
<h2 className={styles.no_result}>No Result</h2>
)}
</div>
<ReactPaginate
previousLabel={previousSVG}
nextLabel={nextSVG}
breakLabel="..."
breakClassName="break-me"
pageCount={pageCount}
marginPagesDisplayed={1}
pageRangeDisplayed={4}
containerClassName="pagination"
subContainerClassName="pages pagination"
activeClassName="active"
initialPage={0}
onPageChange={handlePageClick}
/>
</div>

подключил console.log() к onScroll. дальше не понятно что делать. мне нужны refs и react-dom или можно что-то поумнее придумать?

2 ответов

7 просмотров

(Сорри, код сложно в сообщении читать с телефона) Я бы сделал так: Повесил бы ref на лист контейнер На скролл бы бы повесил коллбек с троттлом на animationframe а лучше миллисекунд на 200 Внутри коллбека брал бы boundingClientRect у последнего элемента, который ты можешь найти в контейнере. Дальше на основе данных смотрел бы грузить или нет

Делается просто и умно если использовать rxjs) впринципе без него тоже не очень геморно Если ожидается, что лист очень большой будет то лучше посмотреть на virtual table/list компонент какой нить опенсорсный, там конечно со всем этим будет посложнее Если хочется обойтись без reflow от geboundingclientrect, то можно записывать на обновление листа положение последнего элемента и без троттла (но лучше все же с троттлом) обновлять его используя ивент скролла (там всякие дельты должны быть) (только вне стейта компонента обновлять, пожалуйста) и производить дальнейшие действия уже с готовым значением.

Похожие вопросы

Обсуждают сегодня

Всем привет, написал код ниже, но он выдает сегфолт, в чем причина? #include <stdio.h> #include <stdlib.h> #include <string.h> struct product { char *name; float price; };...
buzz базз
32
Хотел бы спросить у знающих, правильную ли я выбрал книгу для начала изучения ассемблера Юрова В.И ? Или есть более лучшие книги для начала обучения?
Botsman
25
Книга Юрова В.И пойдёт для обучения?
Botsman
24
$params = [ 'formid' => 'feedbackForm', 'formTpl' => '@CODE: <form class="form-validate" data-id="ajax_form"> <fieldset class="margin-bottom-md"> ...
Pathologic
1
а мы ещё не созрели до того, чтобы создать отдельный чатик про настройку редакторов?
Cheese Syrowiecki
16
И ещё вопрос: можно ли типа как на дос как-то запариться и с помощью прерываний выводить текст, вместо функции printf ?
НѣкъиⰘижєжєиꙁъвьсєсвѣтьноѣсѣтиѥсть•
34
Всем привет! У меня почему-то по-разному отображается TListView в Debug и Release режимах (FireMonkey)! При запуске под Win приложения TListView заливается программо. в Debug ...
Александр COM
8
Ладно, ещё тупого спрошу. Код должен банально вывести значение регистра на консоль, на деле же не выводя ничего, просто оставляя нерабочую консоль (открыта, ничего не написан...
НѣкъиⰘижєжєиꙁъвьсєсвѣтьноѣсѣтиѥсть•
25
Парни, спасайте. RAD Studio 12 творит какую-то дичь. У меня есть метод (event), который вызывает другой метод, т.е. он состоит из 1-й строки вызова. Ставлю бряк на event, запу...
Eugene Krasnikov (ᴊɪɴ x)
3
окей, дело реально в org было. но что за мусор в конце?
Vi Chapmann
15
Карта сайта