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>

今天的文章Vue的生命周期钩子函数之activated分享到此就结束了，感谢您的阅读。