vue-data-loading

    0.2.4 • Public • Published

    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

    Install

    npm i vue-data-loading

    Homepage

    hacknews.xyz

    DownloadsWeekly Downloads

    492

    Version

    0.2.4

    License

    MIT

    Last publish

    Collaborators

    • bedlate