美文网首页
v.2.16 header 渐隐渐显效果

v.2.16 header 渐隐渐显效果

作者: 阳光之城alt | 来源:发表于2018-07-08 20:51 被阅读0次
    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 横线

    相关文章

      网友评论

          本文标题:v.2.16 header 渐隐渐显效果

          本文链接:https://www.haomeiwen.com/subject/xifauftx.html