https://github.com/legeneek/vue-infinite-list
infinite list based on vue2
https://github.com/legeneek/vue-infinite-list
Last synced: 8 months ago
JSON representation
infinite list based on vue2
- Host: GitHub
- URL: https://github.com/legeneek/vue-infinite-list
- Owner: legeneek
- License: mit
- Created: 2018-04-10T13:47:30.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-26T06:11:41.000Z (almost 7 years ago)
- Last Synced: 2024-04-24T19:49:43.361Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 112 KB
- Stars: 27
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-infinite-list - infinite list based on vue2 (UI Components [🔝](#readme))
- awesome-vue-zh - Vue无限列表 - 无限列表mixin可以为Vue.js 2回收dom (UI组件 / 无限滚动)
- awesome-vue - vue-infinite-list ★19 - An infinite list mixin can recycle dom for Vue.js 2 (UI Components / Infinite Scroll)
- awesome-vue - vue-infinite-list - An infinite list mixin can recycle dom for Vue.js 2 (UI Components / Infinite Scroll)
- awesome-vue - vue-infinite-list - An infinite list mixin can recycle dom for Vue.js 2 (Components & Libraries / UI Components)
README
# vue-infinite-list
infinite list based on vue2.
## Installation
```
npm i vue-infinite-list
```
## demo
```
npm run start
```
## Basic Use
import and register the infinite list component.
```vue
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.
```vue
import ListItem from './ListItem.vue'
import LoadSpinner from './LoadSpinner.vue'
export default {
data() {
return {
listItem: ListItem,
loadSpinner: LoadSpinner
}
},
methods: {
load() {
//...
}
}
// ...
}
```
## Configuration
### listItem
the list item component
### spinner
this load spinner component
### containerHeight
the height of the list container
### itemHeight
the height of the item
### items
array of list items.
`list item data must contain a unique id which used as the key.`
### blockFactor
the list is split to many blocks of the same height(blockFactor * containerHeight)
### extendFactor
the extra height(extendFactor * containerHeight) should render
### loading
the loading status
## Event
### load
notify the parent component to load more list items