我有一个用例,我想根据滚动位置动态更改 CSS 类,描述为 here .
我正在考虑使用 vue-scroll为了这。我做了以下更改:
使用 npm 安装:
npm install vue-scroll --save
在 main.js 中进行了以下更改:
import Vue from 'vue'
import vScroll from 'vue-scroll'
Vue.use(vScroll)
在我要使用它的组件之一中添加了以下内容:
<div v-scroll="onScroll">
...
...
<p>scrollTop:<span>{{position && position.scrollTop}}</span></p>
...
...
</div>
以及组件中的以下更改:
export default {
data () {
return {
position: null
}
},
methods: {
onScroll (e, position) {
console.log('comes here ' + position)
this.position = position
}
},
但是这不起作用,我也尝试将其注册为 main.js 中的指令,如下所示,但这也没有帮助。
const app = new Vue({
router,
store,
el: '#app',
template: '<App/>',
components: { App }, // Object spread copying everything from App.vue
directives: {
'v-scroll': vScroll // tried 'vScroll': vScroll as well
}
})
这不起作用的可能原因是什么。
最佳答案
这个库似乎并没有处于非常稳定的状态,我设法使用 @scroll='onScroll'
或 v-on:scroll 让它工作='onScroll
语法。 position arg 不好用,你需要使用 element.scrollTop
。
看起来文档已经过时了,文档中显示的语法可能是关于 vue 1.x 的。
已编辑
实际上,我完全错了,v-on:scroll
和 @scroll
将由 vue 本身处理,不需要 vue-scroll 库。 vue-scroll 库实际上在我链接的示例中不起作用。
我想你可以使用 vue 的内置滚动而不是 vue-scroll
库
您可以看到一个工作示例(已删除技术支持诈骗链接)
关于javascript - 如何使用vue-scroll,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41096272/