指令v-scroll

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

TIP

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

TIP

还有另一种与滚动相关的指令,称为Scroll触发.

Scroll API

用法

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

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

请注意,默认情况下,所调用的方法没有去抖(debounce)。 为此,你必须自己做,通过用Quasar的debouncer实用程序包裹您的方法,如下所示。 按照下面的示例,您需要使用function (position) {}position => {}.bind(this)才能访问去抖方法中的Vue组件。

import { debounce } from 'quasar'

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

滚动容器确定

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