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)