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

infinite data

Usage

<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.

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.

<div v-for="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();

License

MIT License