指令 v-scroll

这是一个 Vue 指令，它接受一个参数（一个函数），并在用户滚动包含该 DOM 节点的页面时触发。

¥This is a Vue directive which takes one parameter (a Function) and fires when user scrolls the page containing that DOM node.

TIPS

使用此指令的另一种方法是将 QScrollObserver 组件放置在你的页面上。
¥One alternative to using this directive is to place a QScrollObserver component on your page.
还有一个名为滚动触发的滚动相关指令可用。
¥There is one more scrolling-related directive available called Scroll Fire.

用法(Usage)

¥Usage

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

<script>
export default {
  setup () {
    function onScroll (position) {
      // when this method is invoked then it means user
      // has scrolled the page to `position`
      //
      // `position` is an Integer designating the current
      // scroll position in pixels.
    }

    return { onScroll }
  }
}
</script>

import { debounce } from 'quasar'

export default {
  setup () {
    function onScroll (position) {
      // when this method is invoked then it means user
      // has scrolled the page to `position`
      //
      // `position` is an Integer designating the current
      // scroll position in pixels.
    }

    return {
      onScroll: debounce(onScroll, 200) // debounce for 200ms
    }
  }
}

确定滚动容器(Determining Scrolling Container)

¥Determining Scrolling Container

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

¥Please read here about how Quasar determines the container to attach scrolling events to.

1. Introduction

2. Scroll API

3. 用法(Usage)

3.1. 确定滚动容器(Determining Scrolling Container)