vue-scroll-list
v0.7.0
support infinite scroll list with vue
8/weekUpdated 3 years agoMITUnpacked: 44.3 KB
Published by KyLeo
npm install vue-scroll-list
vue-scroll-list
> A vue component support infinite scroll list.Different item height is also supported.
note: Vue version >= 2.3 is needed.
Install
``bash`
$ npm install vue-scroll-list --save-dev
Demos
Usage
`html
vue-scroll-list with infinite data
random height
total: {{count}}
:enabled="true"
:keep="true"
@toTop="onTop"
@toBottom="onBottom"
@scrolling="onScroll">
:key="item.index"
:class="['item']"
:style="{height: item.itemHeight + 'px', 'line-height': item.itemHeight + 'px'}"
v-bind="{'data-height': item.itemHeight}">
index:{{item.index}} / height:{{item.itemHeight}}
`
You can define the height of container(such as the 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.
`html
:key="item.index"
v-bind="{'data-height': item.itemHeight}">
`
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 function to tell us.
`html
:debounce="50"
:remain="10"
:enabled="true"
:keep="true"
@toTop="onTop"
@toBottom="onBottom"
@scrolling="onScroll">
:key="item.index"
:class="['item']"
:style="{height: item.itemHeight + 'px', 'line-height': item.itemHeight + 'px'}"
v-bind="{'data-height': item.itemHeight}">
index:{{item.index}} / height:{{item.itemHeight}}
`
js
this.$refs.vueScrollList && this.$refs.vueScrollList.update();
``