为什么捐赠
API 浏览器
联系站长
v-scroll 指令

这是一个 Vue 指令,它接受一个参数(一个函数),当用户滚动包含该 DOM 节点的页面时触发。

提示

  • 使用此指令的另一种选择是在页面上放置 QScrollObserver QScrollObserver 组件。
  • 还有一个与滚动相关的指令,叫做 Scroll Fire.

Scroll API

正在加载 Scroll API...

用法

<template>
  ...
  <div v-scroll="onScroll">...</div>
  ...
</template>

<script setup>
  function onScroll(position) {
    // 当这个方法被调用时,代表用户已经将页面滚动到`position`的位置
    //
    // `position`是一个整数,表示当前滚动的位置,单位像素
  }
</script>
<template>
  ...
  <div v-scroll="onScroll">...</div>
  ...
</template>

<script setup>
  import { debounce } from 'quasar'

  const onScroll = debounce(position => {
    // 当这个方法被调用时,代表用户已经将页面滚动到`position`的位置
    //
    // `position`是一个整数,表示当前滚动的位置,单位像素
  }, 200) // 防抖 200ms
</script>

确定要附加滚动事件的容器

请阅读 这里 了解 Quasar 如何 确定要附加滚动事件的容器。