Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/legeneek/vue-infinite-list

infinite list based on vue2
https://github.com/legeneek/vue-infinite-list

Last synced: about 1 month ago
JSON representation

infinite list based on vue2

Lists

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