2.1.0 • Published 10 years ago

view-list v2.1.0

Weekly downloads
75
License
MIT
Repository
github
Last release
10 years ago

view-list Build Status

An infinite scrolling list view element built on a virtual DOM.

Example

View a live example displaying 200k rows: http://shama.github.io/view-list

Render the ViewList using virtual-dom:

var ViewList = require('view-list')

// Create an instance of our view list in document.body
var viewlist = new ViewList({
  appendTo: document.body
})

// Create some data to add to the list
var data = ['one', 'two', 'three']

// Render the data
viewlist.render(data)

// Listen for scroll events coming up
viewlist.addEventListener('scroll', function (element) {
  console.log('List was scrolled to ' + element.scrollTop)
})

// Every second, append a new row
var i = 0
setInterval(function() {
  data.push('row ' + i++)
  viewlist.render(data)
}, 1000)

API

var list = new ViewList(params)

params can be (in addition to the virtual-dom parameters):

  • tagName: The tag to use. Default 'ul'.
  • childTagName: The tag to use for child elements. Default 'li'.
  • className: The classes to use on main element. Default 'view-list'.
  • topClassName: The classes to use on top element. Default '.top'.
  • bottomClassName: The classes to use on bottom element. Default '.bottom'.
  • element: The DOM element of the list.
  • height: The total height of the container. Default 500.
  • rowHeight: The height of each row. Default 30.
  • eachrow: A function that gets called for each row to return a custom element per row. Default:

    function (row) {
      return this.html(this.childTagName, {
        style: {
          height: this.rowHeight
        }
      }, [row])
    }

Events

Listen for events with list.addEventListener(name, function () {}).

  • load: Called when element has loaded.
  • scroll: Called when element has been scrolled.

license

(c) 2016 Kyle Robinson Young. MIT License

2.1.0

10 years ago

2.0.0

10 years ago

1.4.0

10 years ago

1.3.0

10 years ago

1.2.1

10 years ago

1.2.0

10 years ago

1.1.0

10 years ago

1.0.0

10 years ago