老师有个问题
来源：1-7 Vue项目详情页 - 动态获取详情页面数据
lcyjerry
2020-05-23 16:19:22
<template>
<div>
<router-link
tag="div"
to="/"
class="header-abs"
v-show="showAbs"
>
<div class="iconfont header-abs-back"></div>
</router-link>
<div
class="header-fixed"
v-show="!showAbs"
:style="opacityStyle"
>
<router-link to="/">
<div class="iconfont header-fixed-back"></div>
</router-link>
景点详情
</div>
</div>
</template>
<script>
export default {
data(){
return{
showAbs:true,
opacityStyle :{
opacity : 0
}
}
},
methods:{
handleScroll(){
console.log(1);
const top = document.documentElement.scrollTop
if(top > 60){
let opacity = top /100
opacity = opacity > 1 ? 1 :opacity
this.opacityStyle = { opacity }
this.showAbs = false
}else{
this.showAbs = true
}
}
},
activated(){
window.addEventListener('scroll',this.handleScroll)
},
deactivated() {
window.removeEventListener('scroll',this.handleScroll)
},
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.header-abs
position absolute
left .2rem
top .2rem
width .8rem
height .8rem
line-height .8rem
border-radius .4rem
background-color rgba(0,0,0,.8)
text-align center
.header-abs-back
color #fff
font-size .4rem
.header-fixed
position fixed
z-index 2
top 0
left 0
right 0
height $headerHeight
line-height $headerHeight
background-color $bgColor
text-align center
font-size .32rem
color #fff
.header-fixed-back
position absolute
top:0
left 0
width:.64rem
text-align center
font-size .4rem
color #fff
</style>
为什么滚动屎那个函数不生效了
1回答
-
好帮手慕糖
2020-05-23
同学你好，exclude是不包含的意思，exclude="Detail"是缓存的组件，不包含Detail这个组件。
但是只有组件在 <keep-alive> 内被切换， activated生命周期钩子函数将会被执行。所以这里 activated并没有执行，建议：可以改为mounted。例：
这个后面也是会有讲解的哦。可以接着往后学习。
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0
相似问题