Membuat Load More on Scroll atau Infinite Scroll dengan Laravel Livewire

Halooo, kembali lagi pada artikel seputar pembahasan coding, kali ini saya memberitahu cara implentasi "Load more" mengunakan fitur livewire laravel pada website anda. Sebelum apa itu  loadmore, Load More merupakan bagian dari pagination namun dengan menambahkan sedikit modifikasi pada saat membuatnya. Sedangkan pagination merupakan fitur yang dapat membatasi tampilan pada website supaya lebih efisien, perhatikan tahap dan script dibawah ini .

    

Contoh Gambar

1.  Gunakan wire:click"load"(sesuaikan function yang digunakan), pada halaman yang ingin digunakan Load More

      <div class="col-lg-12 text-center">     <a wire:click="load" class="btn_2">More Items</a>     </div>

2. Lalu pada controller tambahkan beberpa script berikut:

    - public $amount = 6;  Sebagai bilangan ketika menekan loadmore akan menambah 6 konten atau                                               lainnya

    - $datas = Artikel::take($this->amount)->get();   Sebagai mengakses jumlah yang ditentukan oleh                                                                                      amount

    - compact('datas')  Sebagai merender value yang ditampung oleh $datas

    - public function load(){ $this->amount += 6;}  Sebagai ketika digunakan loadmore pada tampilan,                                                                                     akan muncul konten 6 dan terus menambah ketika di                                                                                  klick

class ShowLaravel extends Component

{

   

    public $amount = 6;

    public function render()

    {

        //Load more

        $datas = Artikel::take($this->amount)->get();

       

        return view('livewire.view-beranda.show-laravel', compact('datas'));

    }

    //Load more

    public function load()

    {

        $this->amount += 6;

    }

   

}