我有一个非常简单的应用程序,它有 2 个组件: App.vue
和另一个组件 Home.vue
我在其中保存应用程序的其余结构:粘性标题和一些部分要滚动到的锚点。
我想将一个类应用于粘性标题,以在滚动页面时最小化徽标。所以我想我会注意 window.scrollY
中的任何变化。因此,如果 scrollY
大于 0,则应用一些最小化徽标的类。
我试图在我的组件中监听滚动事件,但并没有走得太远。在此讨论中,提供了一个很好的解决方案,但我不知道在哪里放置滚动事件。 https://github.com/vuejs/Discussion/issues/324
所以,我认为最合适的解决方案是创建一个数据属性,为其分配 window.scrollY
图,然后观察其值的变化。不幸的是,观察者永远不会被触发。所以现在我被困住了。代码是:
data () {
return {
...
windowTop: window.top.scrollY
}
}
...
watch: {
windowTop: {
immediate: true,
handler (newVal, oldVal) {
console.log(newVal, oldVal);
},
}
}
关于我可能做错了什么的任何想法?
原文由 Iulia Mihet 发布,翻译遵循 CC BY-SA 4.0 许可协议
window
不能像那样被动地使用属性。相反,您必须收听window
的scroll
事件并做出相应响应: