A vue component support infinite scroll list.Different item height is also supported.
note: Vue version >= 2.3 is needed.
$ npm install vue-scroll-list --save-dev
<template> <div id="app"> <h2>vue-scroll-list with infinite data</h2> <h3>random height</h3> <h4>total: {{count}}</h4> <div class="wrapper"> <scroll-list :debounce="50" :remain="10" :enabled="true" :keep="true" @toTop="onTop" @toBottom="onBottom" @scrolling="onScroll"> <div v-for="(item, index) in list" :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}} </div> </scroll-list> </div> </div> </template> <script> import scrollList from 'vue-scroll-list'; export default { name: 'app', data() { return { list: [], heightList: [], count: 0 }; }, components: { scrollList }, methods: { onTop() { console.log('[demo]:page to top.'); }, onBottom() { console.log('[demo]:page to bottom.'); !window.__stopLoadData && this.createData(); }, onScroll(event) { window.__showScrollEvent && console.log(event); }, createData() { let size = window.__createSize || 40; this.count += size; for (let i = this.count - size; i < this.count; i++) { let itemHeight = Math.round(Math.random() * 100) + 40; this.list.push({ index: i, itemHeight: itemHeight }); // this.heightList.push(itemHeight); } console.log('[demo]:' + size + ' items are created.') } }, created() { window.__createSize = 40; window.__stopLoadData = false; window.__showScrollEvent = false; this.createData(); } }; </script> <style scoped> #app { text-align: center; } .wrapper { height: 400px; padding: 0; border: 1px solid #eee; -webkit-overflow-scrolling: touch; } .item { border-bottom: 1px solid #eee; overflow: hidden; } .item:last-child { border-bottom: 0; } .scroll-container { transform: translate3d(0, 0, 0); } </style>
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.
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. |
heights property is an array contains all height of your item,but you can tell us the height of each item by setting the data-height property.
item in list"
:key="item.index"
v-bind="{'data-height': item.itemHeight}">
</div>
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.
<scroll-list ref="vueScrollList" :debounce="50" :remain="10" :enabled="true" :keep="true" @toTop="onTop" @toBottom="onBottom" @scrolling="onScroll"> <div v-for="item in list" :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}} </div> </scroll-list>
this.$refs.vueScrollList && this.$refs.vueScrollList.update();