我有这段代码,其目标是,如果滚动位置大于0,则将数据sticky
更新为true
export default {
components: {
},
data() {
return {
menuVisible: false,
sticky: false,
}
},
mounted() {
this.checkScroll()
},
methods: {
checkScroll() {
document.querySelector('body').onscroll = function() {
console.log(window.pageYOffset > 0)
this.sticky = window.pageYOffset > 0
}
},
},
}
问题是,即使我看到记录了真实的控制台,数据也始终为假(作为初始值)
任何想法为什么不更新它?
这是因为您将回调传递给了滚动侦听器。在您的回调中this
不是vue组件的上下文。我认为它的身体实际上。您将需要使用箭头函数或将vue实例作为参数传递给回调。箭头功能最简单。箭头函数保留定义它的上下文,而不继承调用它的对象的上下文。这是有关difference between normal and arrow functions的好帖子/答案。
document.querySelector('body').onscroll = () => {
console.log(window.pageYOffset > 0)
this.sticky = window.pageYOffset > 0
}