Livewire: Paginazione e Infinite Scroll

Paginazione in Livewire

Livewire rende la paginazione incredibilmente semplice con il trait WithPagination.

Paginazione Base

<?php
use Livewire\Component;
use Livewire\WithPagination;

class ShowPosts extends Component
{
    use WithPagination;

    public function render()
    {
        return view('livewire.show-posts', [
            'posts' => Post::paginate(10)
        ]);
    }
}
?>

<div>
    @foreach($posts as $post)
        <article>
            <h2>{{ $post->title }}</h2>
            <p>{{ $post->excerpt }}</p>
        </article>
    @endforeach

    {{ $posts->links() }}
</div>

Infinite Scroll

<?php
class InfinitePosts extends Component
{
    public $perPage = 10;

    public function loadMore()
    {
        $this->perPage += 10;
    }

    public function render()
    {
        return view('livewire.infinite-posts', [
            'posts' => Post::take($this->perPage)->get()
        ]);
    }
}
?>

<div>
    @foreach($posts as $post)
        <article>
            <h2>{{ $post->title }}</h2>
        </article>
    @endforeach

    <div x-intersect="$wire.loadMore()">
        <div wire:loading>
            Caricamento...
        </div>
    </div>
</div>