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>

Infinite scroll.mp4

• Infinite scroll.mp4
• 586.8 KB

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

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