ListView for Vue
Inspired by
- https://github.com/emberjs/list-view
- Google plus web-app
Features
- Auto GC/restore invisible/visible list items
- Does not modify the original data (the list or the items)
Demo
Requirements
- vue 1.0+
Usage
- Define an
itemComponent
It's just a plain vue component object, except for it'sprops
will be force overridden to only accept anitem
, which is an item in the list. So you should just leave theprops
option empty.import foo from 'foo'; const itemComponent = { template: '<foo :some-prop="item"></foo>', components: {foo} }
itemComponent
serves as an adaptor for list data, for example, normally you would do
html <foo v-for="item in listToRender" :some-prop="item">
The data is passed through list -> v-for -> item -> foo
With list-view, it is now
html <list-view :items="listToRender"> ...internal v-for for demonstration, you needn't write the following... <template v-for="item in items"> <item-component :item="item"> ...The is the template of itemComponent... <foo :some-prop="item"></foo> ...template end... </item-component> </template> ...internal v-for end... </list-view>
And The data is passed through list -> listView -> item -> foo
- Instantiate a listView component object
const listView = ListView(itemComponent)
You can of course give it some other name like albumListView
.
- Add
listView
to some other component'scomponents
and use it intemplate
const someComponent = { template: '<list-view :items="myArr"></list-view>', components: {listView}, data: () => ({ myArr: [1,2,3] }) }
or simply use it like
javascript new Vue({ el: 'body', components: {listView}, template: '<list-view :items="myArr"></list-view>', data: { myArr: [1,2,3] } })
ListView Component
Props
-
items
The list to be rendered (v-for
-ed) -
preloadScreens
The preload margin measured in screen's height, set to 0 if you don't want preloading (not suggested)
Events
-
list-view:scrolled-to-end
Dispatched when scrolled to end, can be used as a signal to load more data
Slots
-
list-start
,list-end
Placed before/after the list, can be used to display a loading status