vue-data-loading

Another component for infinite scroll and pull down/up to load data.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-data-loading
0.2.45 years ago5 years agoMinified + gzip package size for vue-data-loading in KB

Readme

vue-data-loading
中文文档
Another component for infinite scroll and pull down/up to load data.

Here is a demo: HackNews
vue-data-loading

Install

npm install vue-data-loading --save

Usage

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

API

Props

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.

Events

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

Slots

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

completed

Display when data is completed and not loading

Develop

# install dependencies
npm install

# serve example with hot reload at localhost:8080
npm run dev

# build vue-data-loading component
npm run dist