Infinite scroll

[NikitOS]

Данная версия устарела. Новая версия на docs.teslacloud.net.

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

<xf:js src="TC/ComponentLibrary/infinite_scroll.js" addon="TC/ComponentLibrary" min="1" />

<div class="block" data-xf-init="tc-infinite-scroll" data-append=".itemContainer">
    <div class="block-container">
        <div class="block-body">
            <div class="itemContainer">
                <xf:foreach loop="$items" value="$item">
                    <xf:comment>Code here</xf:comment>
                </xf:foreach>
            </div>
        </div>
    </div>
 
    <div class="block-outer block-outer--after">
        <xf:pagenav page="{$page}" perpage="{$perPage}" total="{$total}"
                    link="demo/infinite-scroll"
                    wrapperclass="block-outer-main" />
    </div>
</div>

View attachment Infinite scroll.mp4

Параметры TeslaCloud.InfiniteScroll (tc-infinite-scroll)

Параметр	Значение по умолчанию	Описание
append	null	Селектор для добавления контента.
hideNav	false	Если true, блок пагинации будет скрыт на странице.
history	true	Если true, переход на следующую страницу будет записан в истории браузера.
scrollPercent	100	Процент прокрутки, необходимый для загрузки следующей страницы.
considerFooter	true	Если true, высота подвала (#footer) будет учитываться при расчете высоты прокрутки.