<div id="component-navbar" :class="hasBackground">
computed: {
hasBackground() {
if (window.scrollY > 0) {
return 'has-background'
}
}
}
我有一个粘性导航栏,如果页面滚动大于 0,我想添加背景。问题是,hasBackground
- 滚动变化时不会重新计算
- 页面刷新时,即使页面滚动,
window.scrollY
始终为零 - 仅在对文件进行更改时才适用于热重载。
我该怎么做?
最佳答案
正如@obermillerk所说:
The
window
object cannot be observed properly in vue.
所以你有两个选择:
- 在组件初始化时读取
window.scrollY
。 - 添加
window.addEventListener('scroll', ..., { Passive: true })
。
组件初始化时读取window.scrollY
Vue.component('component-navbar', {
computed: {
hasBackground () {
console.log('window.scrollY', window.scrollY)
if (window.scrollY > 0) {
return 'has-background'
}
}
},
template: '<nav :class="hasBackground"></nav>'
})
const app = new Vue({
el: '#app'
})
#app {
min-height: 110vh;
}
nav {
min-height: 50vh;
}
nav.has-background {
background: linear-gradient(red, orange);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<article id="app">
<component-navbar></component-navbar>
</article>
添加window.addEventListener('scroll', ..., { Passive: true })
Vue.component('component-navbar', {
data () {
return {
isScrolled: false
}
},
computed: {
hasBackground () {
if (this.isScrolled) {
return 'has-background'
}
}
},
template: '<nav :class="hasBackground"></nav>',
mounted () {
window.addEventListener('scroll', this.setIsScrolled, { passive: true })
this.setIsScrolled()
},
destroyed () {
window.removeEventListener('scroll', this.setIsScrolled, { passive: true })
},
methods: {
setIsScrolled () {
this.isScrolled = window.scrollY > 0
}
},
})
const app = new Vue({
el: '#app'
})
#app {
min-height: 110vh;
}
nav {
min-height: 50vh;
}
nav.has-background {
background-image: linear-gradient(red, orange);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<article id="app">
<component-navbar></component-navbar>
</article>
关于javascript - 页面重新加载时计算属性中的 window.scrollY 为 0,在热重载时工作正常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55833692/