Laravel Livewire infinite scroll

Solved
succute

January 11, 09:55 AM

How to create a Laravel Livewire infinite scrolling?

Select One:
bobbyiliev

January 11, 10:26 AM

Best Answer

Hi there,

What you could do is follow the steps here:

  • First in your Component Class add a listener:
    protected $listeners = [
        'load-more' => 'loadMore',
    ];
  • After that add a public property which will be used to specify how many entries to be loaded:
    public $numResults = 20;
  • Then in your render method define your pagination as normal but inlcude the numResults proeprty:
    public function render()
    {
        $posts = Post::query()
                            ->where('status', 'active')
                            ->orderBy('created_at', 'desc')
                            ->paginate($this->numResults);
        return view('livewire.posts', compact('posts'));
    }
  • Finally include the following JavaScript to detect when more posts have to be loaded:
<script type="text/javascript">
    window.onscroll = function(ev) {
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
            window.livewire.emit('load-more');
        }
    };
</script>
  • Finally in your view add a foreach method as usual

You can take a look at the following project as an example:

https://github.com/guildso/guild/blob/main/resources/views/livewire/posts.blade.php

https://github.com/guildso/guild/blob/main/app/Http/Livewire/Posts.php

Hope that this helps! Regards, Bobby

2
Select One:
Write
Preview
Help

Markdown Basics

DevDojo uses Markdown syntax for writing posts, commments, and other content throughout the site. Below you will find some commonly used markdown syntax. For a deeper dive in Markdown check out this Cheat Sheet


Bold & Italic

Italics *asterisks*

Bold **double asterisks**


Code

Inline Code `backtick`

Code Block

```
Three back ticks and then enter your code blocks here.
```

Headers

# This is Heading 1
## This is Heading 2
### This is Heading 3
#### This is Heading 4
##### This is Heading 5

Here is an example of how each heading will looks

Heading 1

Heading 2

Heading 3

Heading 4
Heading 5

Quotes

> type a greater than sign and start typing your quote.

Links

You can add links by typing the alt text inside of [] and the link inside of (), like so:

[links](https://devdojo.com)

Images

You can add images by selecting the image icon, which will upload and add an image to the editor, or you can manually add the image by adding an exclamation !, followed by the alt text inside of [], and the link inside of (), like so:

![alt text for image](https://cdn.devdojo.com/images/image.png)

Embedding Codepens

You can also embed a codepen pen by writing the following:

{% codepen https://codepen.io/your/pen/url %}

You may also choose the default tabs you wish to show your pen by writing the default-tab like so: (default is result)

{% codepen https://codepen.io/your/pen/url default-tab=result,html %}

That's about it. It's time to start crafting your story.

Please login, or signup to write a response.