📜 An infinite scrolling list view element built on a virtual DOM.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
.travis.yml
README.md
example.css
example.js
index.html
index.js
package.json
test.js

README.md

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