Infinite Scroll

<div data-component="infinite-scroll">
    <div class="scroll-container" data-action="scroll:checkScroll">
        <div data-list="items">
            <template>
                <div class="scroll-item" data-bind="label"></div>
            </template>
        </div>
        <div data-show="loadingMore">Loading more...</div>
    </div>
</div>

<script>
wildflower.component('infinite-scroll', {
    state: { items: [], loadingMore: false, page: 0, hasMore: true },
    computed: {
        statusText() {
            return this.items.length + ' items loaded'
                + (this.hasMore ? ', scroll for more' : ', all loaded');
        }
    },
    init() { this._loadPage(); },
    checkScroll(e) {
        const el = e.target;
        const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 50;
        if (nearBottom && !this.loadingMore && this.hasMore) this._loadPage();
    },
    _loadPage() {
        this.loadingMore = true;
        setTimeout(() => {
            const start = this.page * 20;
            for (let i = 0; i < 20; i++) {
                this.items.push({ label: 'Item ' + (start + i + 1) });
            }
            this.page++;
            this.loadingMore = false;
            if (this.page >= 5) this.hasMore = false;
        }, 600);
    }
});
</script>