# 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
