v.2.16 header 渐隐渐显效果

image.png image.png

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 生命周期

http://www.daqianduan.com/example?pid=4258 横线