vue-infinite-loading based on bedlate's vue-data-loading
npm install infinite-loading> Another component for infinite scroll and pull down/up to load data.
Here is a demo: HackNews
npm install vue-data-loading --save
Import first:
import VueDataLoading from 'vue-data-loading'
Register as a component:
components: {
VueDataLoading
},
The only you need to do is wrapping your data with vue-data-loading tag.
However, you can pass some props or events to the component.
Sometimes, you may want to change the default style or text(html), that is easy, just edit the slot:
Here is a example for infinite-scroll-loading slot:
default:
edit:
Here is a full example
#### loading
Type: boolean
Default: false
The component will not trigger any events while loading is true.
It should be true when data are downloading, and false when finished.
#### completed
Type: boolean
Default: false
The component will not trigger infinite-scroll if true.
It should be true when all data have be loaded.
#### init-scroll
Type: boolean
Default: false
The component will trigger infinite-scroll once if true when it has be mounted.
It uses to bootstrap when page first-time loads.
#### distance
Type: number
Default: 60
Unit: px
Only available for touch* event, when pull distance is not less than it, pull-down or pull-up will be triggered.
#### offset
Type: number
Default: 0
Unit: px
Sometimes you want to change bottom offset to trigger infinite-scroll in advance.
#### listens
Type: array
Default: ['infinite-scroll', 'pull-down', 'pull-up']
The component will not trigger the event if it not in the list.
#### container
Type: string
Required: false
All events bind on window if it is not set, or you need to specify a container ref to it.
#### infinite-scroll
Emit when container has already scrolled to bottom of window
#### pull-down
Emit when container has already pulled down
#### pull-up
Emit when container has already pulled up
#### infinite-scroll-loading
Display when container has already scrolled to bottom of window and data is loading
#### pull-down-before
Display when distance of pull-down is less then distance prop
#### pull-down-ready
Display when distance of pull-down is not less then distance prop
#### pull-down-loading
Display when container has already pull-down and data is loading
#### pull-up-before
Display when distance of pull-up is less then distance prop
#### pull-up-ready
Display when distance of pull-up is not less then distance prop
#### pull-up-loading
Display when container has already pull-up and data is loading
`` bashinstall dependencies
npm install