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.

• Item: {{item}}

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:

loading...

Here is a full example

API

$3

#### 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.

$3

#### 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

$3

#### 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

`` bash


install dependencies