Vue的生命周期钩子函数之activated

• activated 生命周期在keep-alive 组件激活时调用
• 服务器端渲染期间不调用该生命周期
• 通常和deactivated周期一起使用

以下例子演示随着屏幕的滚动切换顶部悬浮窗的显示与隐藏效果

html代码块

    <div id="singleBanner">
    <!-- 顶部悬浮窗效果 -->
      <div id="surperficial" v-if="show">
          <router-link to="/" class="backBtn"><Icon type="ios-arrow-back" id="leftIcon" />
          </router-link>        
          <span>天津方特欢乐世界</span>
      </div>
       <!--  图片部分 -->
        <div class="introPic">
            <router-link to="/" tag="div" class="backBtn"><Icon type="ios-arrow-dropleft-circle" id="backIcon" /></router-link>
            <div class="picNum"><Icon type="md-images" color="white" id="imgIcon"/><span>{{picNum}}</span></div>
            <div class="picTitle">
                <span class="left">天津方特欢乐世界</span>
                <span class="right">视频<Icon type="ios-arrow-forward" id="backBtn" /></span>
            </div>
        </div>
        <div class="introText">
            <div class="introTextTop">
                <ul>
                    <li>
                        <p class="text-l"><span class="score">{{score}}</span>分<span class="level">超赞</span></p>
                        <p class="text-r"><span class="comment">{{commNum}}条评论</span><span class="maker">{{makerNum}}条攻略</span></p>
                        <Icon type="ios-arrow-forward" class="moreBtn" />

                    </li>
                    <li>
                        <p class="text-l"><span class="sightintro">景点简介</span></p>
                        <p class="text-r"><span class="comment">开放时间、 贴士</span></p>
                        <Icon type="ios-arrow-forward" class="moreBtn" />

                    </li>
                </ul>
            </div>
            <div class="clearfix"></div>
            <div class="introTextBottom">
                <Icon type="ios-pin-outline" id="locationIcon" />
                <span class="content">天津市滨海新区新生态城中生大道北首生态岛内</span>
                <Icon type="ios-arrow-forward" id="moreIcon" />
            </div>
            <div class="introTextWarn">
                 <Icon type="ios-megaphone" id="messPhone"/>
                 <span class="warn_con">如因天气原因、设备检修等造成部分项目暂缓</span>
                 <Icon type="ios-arrow-forward" id="moreMess" />
            </div>
        </div>
    </div>
</template>

script代码块

<script>
export default({
     name:'singleBanner',
     data:function(){
        return{
            picNum:57,
            score:"5.0",
            commNum:6696,
            makerNum:1,
            show:false,
            opacity:{opacity:0}
        }
     },
     methods:{
        scrollChange:function(){
            //console.log("move move move");
            let top=document.documentElement.scrollTop;
            //console.log(top);
            if(top==0){
                this.show=false;
            }else{
                this.show=true;
            }
        }

     },
     mounted:function(){

     },
     activated:function(){
          window.addEventListener('scroll',this.scrollChange);//当从缓存中调取数据时触发该生命周期函数
     },
    deactivated:function(){
         window.removeEventListener('scroll',this.scrollChange);
     }

})  
</script>

styley样式

<style lang="less" scoped>
@import '~style/common.less';//引入外部样式
#singleBanner{
    position:relative;
    #surperficial{
        position: fixed;
        .w(375);
        .h(44);
        .l-h(44);
        text-align:left;
        background: #00bcd4;
        .top(0);
        z-index: 100;
        #leftIcon{
            .fs(20);
             color:white;
        }
        span{
            .fs(18);
            .marginLeft(75);
             color:white;
        }
    }
    .introPic{
        .w(375);
        .h(206);
        background: url('http://img1.qunarzz.com/sight/p0/1711/f6/f6fe49bdcbb82882a3.water.jpg_600x330_adb21e76.jpg') center center;
        background-size: cover;
        .backBtn{
            text-align: left;
            #backIcon{
            .fs(40);
            opacity: 0.8;
           }
         }
      .picNum{
        .w(60);
        .h(20);
        .l-h(20);
        background:rgba(0,0,0,.5);
        .b-r(10);
        color:white;
       .marginLeft(12);
       .marginTop(110);
       #imgIcon{
        .fs(16);
        vertical-align: middle;
        .marginRight(4);
        .marginTop(-2);
       }
      }
      .picTitle{
        .w(375);
        .h(20);
        .l-h(20);
        .fs(18);
        color:white;
        text-align: left;
        .marginTop(6);
        .left{
            .marginLeft(6);
        }
        .right{
            .marginLeft(160);
            #backBtn{
                .fs(22);
            }
        }
      }  
   }
    .introText{
        .w(375);
        .h(168);
        border: 1px solid white;
        /* background: white; */
        .introTextTop{
            list-style: none;
            .fs(0);
            .marginTop(8);
             ul{
                .w(375);
                .h(44);
                background: white;
                list-style: none;
                li{
                .w(177);
                .h(44);
                .fs(12);
                .paddingLeft(4);
                float: left;
                background:white;
                border-left: 1px solid #f5f5f5;
                color:black;
                position:relative;
                text-align: left;
                .text-l{
                    color:#f60;
                    .fs(14);
                    .score{
                        .fs(18);
                    }
                    .level{
                        .marginLeft(10);
                    }
                    .sightintro{
                        color:black;
                        .fs(16);
                    }
                }
                .text-r{
                    color:#999;
                    /* .marginBottom(8); */
                    .maker{
                        .marginLeft(10);
                    }
                }
                .moreBtn{
                    position:absolute;
                    .top(10);
                    .right(4);
                    .fs(18);
                    color:#999;
                }
            }
             }

        }
        .introTextBottom{
            .w(375);
            .h(55);
            .l-h(55);
            .fs(14);
            text-align: left;
            background:white;
            border-top:0.6px solid #eee;
            #locationIcon{
                .fs(16);
                .marginLeft(4); 
            }
            #moreIcon{
                .fs(16);
                .marginLeft(12);
                color:#999;
            }
        }
        .introTextWarn{
            .w(375);
            .h(55);
            .marginTop(4);
            .l-h(55);
            .fs(14);
            text-align: left;
            background:rgb(255,245,229);
            color:#f60;
            #messPhone{
                .fs(16);
                color:#f60;
                .marginLeft(4);
            }
            #moreMess{
                .fs(16);
                .marginLeft(28);
                color:#999;
            }
        }
    }

.clearfix{
    clear:both;
}    
}
</style>