- Notifications
You must be signed in to change notification settings - Fork4
infinite list based on vue2
License
NotificationsYou must be signed in to change notification settings
legeneek/vue-infinite-list
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
infinite list based on vue2.
npm i vue-infinite-listnpm run startimport and register the infinite list component.
import InfiniteList from 'vue-infinite-list'Vue.component(InfiniteList.name, InfiniteList)
use it in you app, pass the list item component and spinner component to infinite list component, config the props.
<template> <divid="app"> <infinite-list@load="load":list-item="listItem":spinner="loadSpinner":container-height="containerHeight":item-height="itemHeight":items="items":loading="loading"> </infinite-list> </div></template><script>importListItemfrom'./ListItem.vue'importLoadSpinnerfrom'./LoadSpinner.vue'exportdefault {data() {return { listItem: ListItem, loadSpinner: LoadSpinner } }, methods: {load() {//... } }// ...}</script>
the list item component
this load spinner component
the height of the list container
the height of the item
array of list items.list item data must contain a unique id which used as the key.
the list is split to many blocks of the same height(blockFactor * containerHeight)
the extra height(extendFactor * containerHeight) should render
the loading status
notify the parent component to load more list items