指令“v-scroll”

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

使用此指令的另一种方法是在页面上放置一个QScrollObservable组件。

安装

编辑 /quasar.conf.js:

framework: {
  directives: ['Scroll']
}

基本用法

<!-- 下面的VueModel的模板 -->
...
<div v-scroll="scrolled">...</div>
...
// 上面模板的VueModel 
{
  ...,
  methods: {
    ...,
    scrolled (position) {
      //当这个方法被调用时，意味着用户
      //已将页面滚动到`position`
      //
      //`position`是一个Integer, 指定的以像素为单位的
      //当前滚动位置。
    }
  }
}

重要
请注意，默认情况下，所调用的方法没有去抖（debounce)。 为此，你必须自己做，通过用Quasar的debouncer（作为例子）包装你的方法，就像下面的例子。

了解更多关于debouncing, 请参考这里。

import { debounce } from 'quasar'

export default {
  ...,
  methods: {
    ...,
    scrolled: debounce(position => {
      //当这个方法被调用时，意味着用户
      //已将页面滚动到`position`
      //
      //`position`是一个Integer, 指定的以像素为单位的
      //当前滚动位置。
    }, 200) // 200ms去抖
  }
}

注意
在其自己的文档页面上还有一个与滚动相关的指令，名为“滚动触发”。 阅读更多。

滚动容器确定

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

滚动侦听器 无限滚动