这是一个 Vue 指令,它接受一个参数(一个函数),当用户滚动包含该 DOM 节点的页面时触发。
提示
- 使用此指令的另一种选择是在页面上放置 QScrollObserver QScrollObserver 组件。
- 还有一个与滚动相关的指令,叫做 Scroll Fire.
Scroll API
用法
<template>
...
<div v-scroll="onScroll">...</div>
...
</template>
<script>
export default {
setup() {
function onScroll(position) {
// 当这个方法被调用时,代表用户已经将页面滚动到`position`的位置
//
// `position`是一个整数,表示当前滚动的位置,单位像素
}
return { onScroll };
},
};
</script>content_paste
import { debounce } from "quasar";
export default {
setup() {
function onScroll(position) {
// 当这个方法被调用时,代表用户已经将页面滚动到`position`的位置
//
// `position`是一个整数,表示当前滚动的位置,单位像素
}
return {
onScroll: debounce(onScroll, 200), // 防抖 for 200ms
};
},
};content_paste
确定要附加滚动事件的容器
请阅读 这里 了解 Quasar 如何 确定要附加滚动事件的容器。