Event

Vuescroll has some events that will trigger in the specific circumstances.

Basic events

handle-resize

Introduction

Trigger when content's size changed.

Event Detail

params description
vertical, horizontal, nativeEvent Pass 3 params to you, vertical and horizontal tell you the information about vertical bar and horizontal bar, the thrid param is the native event.

Usage

    <vue-scroll
    @handle-resize="handleResize"
    >
    </vue-scroll>
    // ...
    {
        methods: {
            handleResize() {
                console.log('content has resized!')
            }
        }
    }

TIP

You can try to adjust the size of content in the browser dev-tool and see the result.

Try handle-resize on Codepen

handle-scroll

Introduction

Trigger when content is scrolling.

Event Detail

params description
vertical, horizontal, nativeEvent Pass 3 params to you, vertical and horizontal tell you the information about vertical bar and horizontal bar, the thrid param is the native event.

Usage

    <vue-scroll
    @handle-scroll="handleScroll"
    >
    </vue-scroll>
    // ...
    {
        methods: {
            handleScroll(vertical, horizontal, nativeEvent) {
                console.log(vertical, horizontal, nativeEvent)
            }
        }
    }

Try handle-scroll on Codepen

handle-scroll-complete

Introduction

Trigger when scroll complete

Event Detail

params description
vertical, horizontal Pass 2 params to you, vertical and horizontal tell you the information about vertical bar and horizontal bar.

Usage

    <vue-scroll
    @handle-scroll-complete="handleComplete"
    >
    </vue-scroll>
    // ...
    {
        methods: {
            handleComplete() {
                console.log('scroll complete!')
            }
        }
    }

TIP

Need to open dev-tool to see the result

Try handle-scroll-complete on codepen

Events are only for slide mode

refresh/load

Introduction

corresponding to each stage of pull-refresh. From start to end are refresh-activate, refresh-start, refresh-before-deactivate, refresh-deactivate .

Events Detail

refresh-activate, refresh-deactivate
params description
vm, refreshDom vm is the current vuescroll instance, refreshDom is a dom that will show as a tip.
refresh-start
params description
vm, refreshDom, done vm is the current vuescroll instance, refreshDom is a dom that will show as a tip.done is the finish-function, it is a proper stage that you fetch data, and call the done() to go to next stage.
refresh-before-deactive
params description
vm, refreshDom, done vm is the current vuescroll instance, refreshDom is a dom that will show as a tip.done is the finish-function, it is a proper stage that you show the tip to user(such as load successfully or load error and so on), and call the done() to go to next stage.

Usage

    <vue-scroll
    @refresh-activate="handleActivate"
    @refresh-start="handleStart"
    @refresh-before-deactivate="handleBeforeDeactivate"
    @refresh-deactivate="handleDeactivate"
    >
    </vue-scroll>
    // ...
    {
        methods: {
            handleActivate(vm, refreshDom) {
                console.log(vm, refreshDom, 'handleActivate');
            },
            handleStart(vm, refreshDom, done) {
                console.log(vm, refreshDom, 'handleStart');
                seTimeout(() => {
                    done(); // load finished
                }, 2000)
            },
            handleBeforeDeactivate(vm, refreshDom, done) {
                console.log(vm, refreshDom, 'handleBeforeDeactivate');
                done();
            },
            handleDeactivate(vm, refreshDom) {
                console.log(vm, refreshDom, 'handleDeactivate');
            }
        }
    }

Load is the same as reresh, please view it in demo

A small demo you can checkout here

Last Updated: 8/27/2018, 1:01:56 AM