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