Sonsuz kaydırma

Liste sonu

Sona yaklaşınca yeni sayfa yüklenir (Livewire: action="loadMore" :more="$hasMore"). Burada `load-more` olayı Alpine ile 5 öğe ekliyor.

Yükleniyor…

Kodu göster

<div x-data="{ items: 8, more: true }" style="max-height:320px;overflow-y:auto;border:1px solid var(--arm-border);border-radius:var(--arm-radius-lg)">
    <armada:list variant="divided">
        <template x-for="i in items" :key="i">
            <div class="arm-list__item"><span class="arm-list__content"><span class="arm-list__title" x-text="'Yayıncı #' + i"></span><span class="arm-list__subtitle">Türkiye · aktif</span></span></div>
        </template>
    </armada:list>
    <div x-on:load-more="items < 30 ? items += 5 : (more = false, $el.querySelector('[data-more]')?.removeAttribute('data-more'))">
        <armada:infinite-scroll margin="80px" />
    </div>
</div>

Bitti durumu

Tüm yayıncılar yüklendi

Kodu göster

<armada:infinite-scroll :more="false" end="Tüm yayıncılar yüklendi" />

Özellikler

<armada:infinite-scroll>

Değerler: Put it after the last item. Without `action` it dispatches `load-more` and waits for the next render.

Prop	Varsayılan	Not
`action`	`null`	Livewire method to call, e.g. "loadMore"
`more`	`true`	false: show the end message and stop observing
`margin`	`'400px'`	start loading this far before the end comes into view
`end`	`null`	text when there is nothing more