# 事件
Vuescroll 有一些事件可以在特定场合下触发。
# 通用事件
# handle-resize
# 介绍
当内容尺寸发生变化时触发
# 事件详情
| 参数 | 描述 |
|---|---|
vertical, horizontal, nativeEvent | 给你传递 3 个参数, vertical 和 horizontal 告诉你管你垂直和水平滚动条的信息。第三个参数是触发滚动的原生事件。 |
# Usage
<vue-scroll @handle-resize="handleResize"> </vue-scroll>
// ...
{
methods: {
handleResize() {
console.log('content has resized!')
}
}
}
提示
你可以在浏览器 dev-tool下调节内容尺寸 然后查看结果。
# handle-scroll
# 介绍
当内容滚动的回收触发。
# 事件详情
| 参数 | 描述 |
|---|---|
vertical, horizontal, nativeEvent | 给你传递 3 个参数, vertical 和 horizontal 告诉你管你垂直和水平滚动条的信息。第三个参数是触发滚动的原生事件。 |
# Usage
<vue-scroll @handle-scroll="handleScroll"> </vue-scroll>
// ...
{
methods: {
handleScroll(vertical, horizontal, nativeEvent) {
console.log(vertical, horizontal, nativeEvent)
}
}
}
# handle-scroll-complete
# 介绍
当滚动结束的时候触发
# 事件详情
| 参数 | 描述 |
|---|---|
vertical, horizontal | 给你传递 2 个参数, vertical 和 horizontal 告诉你管你垂直和水平滚动条的信息。 |
# 用法
<vue-scroll @handle-scroll-complete="handleComplete"> </vue-scroll>
// ...
{
methods: {
handleComplete() {
console.log('scroll complete！')
}
}
}
提示
需要打开 dev-tool 查看结果。
在 Codepen 上尝试 handle-scroll-complete
# slide 模式的事件
# refresh/load
# 介绍
对应下拉刷新的每个阶段. 从开始到结束分别是 refresh-activate, refresh-start, refresh-before-deactivate, refresh-deactivate .
# 事件详情
# refresh-activate, refresh-deactivate
| 参数 | 描述 |
|---|---|
vm, refreshDom | vm 是当前 vuescroll 实例, refreshDom 是提示的那个 dom。 |
# refresh-start
| 参数 | 描述 |
|---|---|
vm, refreshDom, done | vm 是当前 vuescroll 实例, refreshDom 是提示的那个 dom。done 是完成函数, 这个阶段你适合去抓取数据, 然后调用 done() 并且进入下一个阶段。 |
# refresh-before-deactivate
| 参数 | 描述 |
|---|---|
vm, refreshDom, done | vm 是当前 vuescroll 实例, refreshDom 是提示的那个 dom。done 是完成函数, 这个阶段你适合去给出提示(比如加载成功！或加载失败！), 然后调用 done() 并且进入下一个阶段。 |
# 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');
setTimeout(() => {
done(); // load finished
}, 2000)
},
handleBeforeDeactivate(vm, refreshDom, done) {
console.log(vm, refreshDom, 'handleBeforeDeactivate');
done();
},
handleDeactivate(vm, refreshDom) {
console.log(vm, refreshDom, 'handleDeactivate');
}
}
}
Load 是一样的，换汤不换药，请在 demo 里查看详情
