vue-scroll-list
A vue component support infinite scroll list.Different item height is also supported.
note: Vue version >= 2.3 is needed.
Install
$ npm install vue-scroll-list --save-dev
Demos
Usage
vue-scroll-list with infinite data random height total: {{count}} index:{{item.index}} / height:{{item.itemHeight}}
You can define the height of container(such as the ul
tag above) by the css height.
note: You can run this demo by npm run dev
.
Props and Events
Available Prop
:
Prop | Type | Required | Description |
---|---|---|---|
heights | Array | * | An array contains all height of your item.If you want to use data-height ,please ignore this option. |
remain | Number | * | The number of item that show in view port.(default 10 ) |
keep | Boolean | * | Work with keep-alive component,keep scroll position after activated.(default false ) |
enabled | Boolean | * | If you want to render all data directly,please set 'false' for this option.But toTop 、toBottom and scrolling event is still available.(default true ) |
debounce | Number | * | Milliseconds of using debounce function to ensure scroll event doesn't fire so often.(disabled by default) |
step | Number | * | Pixel of using throttle theory to decrease the frequency of scroll event.(disabled by default) |
Available Event
:
Event | Description |
---|---|
toTop | An event emit by this library when this list is scrolled on top. |
toBottom | An event emit by this library when this list is scrolled on bottom. |
scrolling | An event emit by this library when this list is scrolling. |
About heights prop
heights
property is an array contains all height of your item,but you can tell us then height of each item by setting the data-height
property.
Sometimes you may need to change the height of each item or filter your item.This may cause some blank problems.So you'd better call update
function to tell us.
index:{{item.index}} / height:{{item.itemHeight}}
this$refsvueScrollList && this$refsvueScrollList;