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.
<vue-data-loading>
<ul>
<li v-for="(item, index) in list" :key="index">Item: {{item}}</li>
</ul>
</vue-data-loading>
However, you can pass some props or events to the component.
<vue-data-loading :loading="loading" :listens="['pull-down', 'infinite-scroll']" @infinite-scroll="infiniteScroll" @pull-down="pullDown">
<!--your data here-->
</vue-data-loading>
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:
<slot :name="infinite-scroll-loading">加载中...</slot>
edit:
<div slot="infinite-scroll-loading" class="some-style-you-like">
<img src="/path/to/your-icon.png">
<span>loading...</span>
</div>
Here is a full example
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.
Type: boolean
Default: false
The component will not trigger infinite-scroll if true.
It should be true when all data have be loaded.
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.
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.
Type: number
Default: 0
Unit: px
Sometimes you want to change bottom offset to trigger infinite-scroll in advance.
Type: array
Default: ['infinite-scroll', 'pull-down', 'pull-up']
The component will not trigger the event if it not in the list.
Type: string
Required: false
All events bind on window if it is not set, or you need to specify a container ref to it.
Emit when container has already scrolled to bottom of window
Emit when container has already pulled down
Emit when container has already pulled up
Display when container has already scrolled to bottom of window and data is loading
Display when distance of pull-down is less then distance prop
Display when distance of pull-down is not less then distance prop
Display when container has already pull-down and data is loading
Display when distance of pull-up is less then distance prop
Display when distance of pull-up is not less then distance prop
Display when container has already pull-up and data is loading
Display when data is completed and not loading
# install dependencies
npm install
# serve example with hot reload at localhost:8080
npm run dev
# build vue-data-loading component
npm run dist
