长列表组件使用

使用长列表组件（vue-virtual-scroll-list）

www.npmjs.com/package/vue…

1.安装组件

npm install vue-virtual-scroll-list --save

2.使用组件

<template>

<div>

<virtual-list style="height: 360px; overflow-y: auto;" 

scrollable

:data-key="'uid'"

:data-sources="items"

:data-component="itemComponent"

/>

</div>

</template>

<script>

import Item from './Item'

import VirtualList from 'vue-virtual-scroll-list'

export default {

name: 'root',

data () {

return {

itemComponent: Item,

items: [{uid: 'unique_1', text: 'abc'}, {uid: 'unique_2', text:

'xyz'}, ...]

}

},

components: { 'virtual-list': VirtualList }

}

</script>

<virtual-list

style="height: 300px; overflow-y: auto;"

     :data-key="'id'"

     :data-sources="hortData[hortIndex] ? hortData[hortIndex].content : []"

     :data-component="itemComponent" 
  
     :keeps="3"
   
     :extra-props="hortText[hortIndex]"

/>