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相关推荐

不来看看这些 VUE 的生命周期钩子函数？ | 原力计划
作者 | huangfuyk 责编 | 王晓曼出品 | CSDN 博客 VUE的生命周期钩子函数:就是指在一个组件从创建到销毁的过程自动执行的函数,包含组件的变化.可以分为:创建.挂载.更新.销毁四 ...
实战 Vue 之生命周期钩子函数执行顺序
实战 Vue 之生命周期钩子函数执行顺序生命周期钩子函数父组件与子组件执行顺序生命周期钩子函数 beforeCreate:实例刚被创建出来,data 数据和 methods 方法还未被初始化,不 ...
详解Vue八大生命周期钩子函数
摘要:Vue为生命周期中的每个状态都设置了钩子函数(监听函数) .每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用. 本文分享自华为云社区<一文带你弄懂Vue八大生命周期钩子函数&g ...
Vue的生命周期钩子函数介绍
感谢内容提供者:金牛区吴迪软件开发工作室 Vue的生命周期钩子函数介绍 vue生命周期共分为四个阶段一:实例创建二:DOM渲染三:数据更新四:销毁实例共有八个基本钩子函数 1.beforeC ...
Vue的生命周期钩子函数
Vue的生命周期钩子函数一.Vue的生命周期共分为四个阶段 1.创建实例 2.DOM渲染 3.数据更新 4.销毁实例二.共有八个基本钩子函数 1.beforeCreate -创建前触发的行为:V ...
教女朋友学习 vue的生命周期钩子函数
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...
vue的生命周期钩子函数的作用
之前在大学学习Java的时候笔试题的第一道题经常是你是怎么理解生命周期的在vue的生命周期却又与Java不同的一个java类的完整的生命周期会经历加载.连接.初始化.使用.和卸载五个阶段: 而v ...
VUE页面生命周期钩子函数
预备知识: 1.vue的生命周期生命周期函数,又叫钩子函数生命周期钩子===生命周期函数===生命周期事件 2. 什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据. ...
vue的组件/data的参数/组件传值/插槽/侦听器/生命周期钩子函数
目录组件结构组件的命名规则: 组件的data参数 <font color='red'> 组件的父子传值prop(通信) <font color='red'>组件的子--&g ...
Vue生命周期钩子函数的使用以及应用场景
文章目录前言钩子函数介绍 beforeCreate(创建前) created(创建后) beforeMounted(挂载前) mounted(挂载后) beforeUpdate(更新前) upda ...

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

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

html代码块

script代码块

styley样式

Vue的生命周期钩子函数之activated相关推荐

最新文章

热门文章