Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

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

3

Version

1.0.2

License

ISC

Unpacked Size

7.78 kB

Total Files

4

Last publish

Collaborators

  • avatar