https://github.com/rendom/vue-virtual-list

Vue 2 virtual list.
https://github.com/rendom/vue-virtual-list

infinite-scroll scroll virtual-list vue vue-virtual-list vue2

Last synced: about 1 year ago
JSON representation

Vue 2 virtual list.

• Host: GitHub
• URL: https://github.com/rendom/vue-virtual-list
• Owner: rendom
• License: mit
• Created: 2016-10-02T21:32:41.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2022-02-04T14:43:15.000Z (over 4 years ago)
• Last Synced: 2025-03-25T14:21:18.411Z (about 1 year ago)
• Topics: infinite-scroll, scroll, virtual-list, vue, vue-virtual-list, vue2
• Language: Vue
• Homepage:
• Size: 11.7 KB
• Stars: 7
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# vue-virtual-list

DynamicHeight is broken atm.  

### 1. Install component

`npm install vue-virtual-list`

If you have mixed heights on your rows then you need to specify `h (Number)` property on your object with the height.

### 2. Setup your app

```

  


    

        
{{item.name}}
 

    

  


import vl from 'vue-virtual-list'

export default {

  components: {

    vl

  },

  data () {

    var items = []

    for (var i = 0; i < 50; i++) {

      items.push({name: 'item' + i, h: 20})

    }

    return {

      items: items,

    }

  }

}

```

### Component properties

| Name        | Type          | Default  |

| ------------- |:-------------:| -----:|

| scroll      | String      |   None, this prop is required can either be `window` or `container`. |

| scrollContainerHegiht | Number      |    Defaults to 500 and is only required if you use scroll container |

| dynamicHeight | Boolean      |    Defaults to `true` this requires that you specify height on your objects. |

| rowHeight | Number      |    Defaults to 0 and is only required if you set objectHeight to false|