Vue路由开启keep-alive时的注意点:
https://blog.csdn.net/qq_32786873/article/details/71171713
<template>
<div class="cont">
<router-link tag="div" to="/" class="header-abs"
v-show="showabs"
>
<span class="iconfont back-icon-abs icon-fanhui"></span>
</router-link>
<div class="header-fixed" v-show="!showabs" :style="apcitystyle">
景点详情
<router-link to="/" >
<span class="iconfont header-fixed-back icon-fanhui"></span>
</router-link>
</div>
</div>
</template>
<script>
export default {
name:'detail',
data(){
return{
showabs:true,
apcitystyle:{
opacity:0
}
}
},
methods: {
hanscoll(){
const top=document.documentElement.scrollTop
//var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
if(top>60){
let opacity=top/140
opacity=opacity>1?1:opacity
this.apcitystyle={
opacity:opacity
}
this.showabs=false
}else{
this.showabs=true
}
}
},
activated() {
window.addEventListener('scroll',this.hanscoll)
},
deactivated() { //页面即将替换新的页面的时候
window.removeEventListener('scroll',this.hanscoll)
}
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.header-abs
position absolute
left .2rem
top .2rem
width .8rem
height .8rem
border-radius 50%
background rgba(0,0,0,.7)
text-align center
line-height .8rem
.back-icon-abs
color #ffffff
font-size .4rem
.header-fixed
position fixed
top 0
left 0
width 100%
z-index 7
overflow hidden
height .86rem
line-height .86rem
text-align center
color #ffffff
background $bgcolor
font-size .36rem
.header-fixed-back
position absolute
top 0
left 0
width .64rem
text-align center
font-size .4rem
color #ffffff
</style>
参考方法
https://blog.csdn.net/stubbor/article/details/73739765 生命周期
https://www.cnblogs.com/webbest/p/6722780.html 生命周期
网友评论