Skip to content

KyLeoHC/vue-scroll-list

Repository files navigation

NPM version

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 toToptoBottom 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 the 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