So today we are going to see how to load data from database when user scrolls. We are going to have a project from scratch.
so you need to have a project setup in laravel.


Once you have the vue component created in project then we can work on scrolling and loading data part.
so we can give a div id let’s say “infinite-list”
and then we check the scroll if reaches the bottom. So for that you need to give id “infinite-list” a particular height and data should be overflowing so that scrollbar appears. and the we can use code to check if scrollbar reaches the bottom using code like this
const listElem = document.querySelector('#infinite-list'); listElem.addEventListener('scroll', e => { if(listElem.scrollTop + listElem.clientHeight >=listElem.scrollHeight){ //this function fires and load more records when scroll bar reaches bottom this.loadmore(); } });
We need to create Controller and Model and We need to setup route to fetch data and then we need to create a vuejs component to display the content. you can check step by step guide here
You can download the code zip and can use it if you want to.
Download code:
https://zarx.biz/download/file/f0a9e02f29badd70ffc968d53
Hope this helps you.
You must log in to post a comment.