Naughty Program Manipulator

    vue-dynamic-list

    1.0.2 • Public • Published

    vue-dynamic-list

    Simple fixed size dynamically loading lists in Vue.js

    This library allows you to create Google Contacts style dynamic lists, it is built upon Vue.js hence is easy to integrate into existing websites with or without Vue.

    Usage


    Include the library:

    <script src="https://unpkg.com/vue-dynamic-list@1.0.1/index.js"></script>

    You also need Vue and jQuery.

    In your Vue.js application:

    <dynamic-list ref="myList">
        <template slot="entry" slot-scope="props">
            <div>{{props.entry}}</div>
        </template>
        <template slot="unloaded" slot-scope="props">
            <span>loading!</span>
        </template>
    </dynamic-list>

    Using the library:

    // create your Vue app, with dynamic-list nested in it
    const app = new Vue({
        el: '#app'
    });
     
    new vDynamicList(app, {
        // reference to the <dynamic-list>
        ref: 'myList',
        // returns a promise which resolves with a section
        onLoad: (i, l) => {
            return new Promise((resolve, reject) => {
                let y = [];
                for (let j = 0; j < l; j++) y.push('hello!')
                setTimeout(() => resolve(y), 400);
            });
        },
        // you should load this first, and then create vDynamicList
        elements: 1400,
        // choose a suitable limit for each section
        limit: 100
    });

    Comparison


    Vue Dynamic List on the left alongside Google Contacts

    Comparison between Google Contacts and Vue Dynamic List

    Demo


    Demo Video

    Not embedding? (Direct Link)

    Keywords

    none

    Install

    npm i vue-dynamic-list

    DownloadsWeekly Downloads

    0

    Version

    1.0.2

    License

    ISC

    Unpacked Size

    7.78 kB

    Total Files

    4

    Last publish

    Collaborators

    • insertish