Event

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

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

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)
            }
        }
    }

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

Event 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: 1/7/2019, 6:57:47 AM