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