指令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如何确定将滚动事件附加到的容器。