vue-infinite-scroll is a super simple and lightweight package allowing you to implement infinite scroll for your project in a second.
Just type
npm i @vpominchuk/vue-infinite-scroll
and use it as:
<infinite-scroll :active="true" distance="50px" auto-load="true" @process="load" />
<infinite-scroll /> component has a few properties to change the behavior.
Properties
| Property | Type | Description |
|---|---|---|
| active | Boolean | Enable / Disable Component |
| distance | String | Distance from the bottom side of the page when component fires @process event to load the content. "200px" is a good enough, but you can choose any other value. |
| auto-load | Boolean | Fire @process event on component mount |
Event
| Property | Description |
|---|---|
| @process | Callback function - fires when user scrolls to the bottom side of the page. Load a new portion of your content here. |
Sample
Sample is available under dev folder.
To try the sample, create a new folder out of your project.
Install vue-infinite-scroll package and run npm run serve
mkdir vue-infinite-scroll-exampe
cd vue-infinite-scroll-exampe
npm i @vpominchuk/vue-infinite-scroll
cd node_modules/@vpominchuk/vue-infinite-scroll/
npm i
npm run serve
If you are using Windows platform try
npm run serve-win
Open http://localhost:8080/ in your favorite browser
Remove node_modules inside @vpominchuk/vue-infinite-scroll/ after tests.
Github page:
https://github.com/vpominchuk/vue-infinite-scroll
Enjoy :)
Top comments (0)