Vue实现Header渐隐渐现效果的实例代码


Posted in Javascript onNovember 05, 2020

新建header.vue组件

引入到父组件Detail.vue中

Vue实现Header渐隐渐现效果的实例代码

header.vue

通过router-link标签设置to属性为地址,实现点击返回首页
tag标签设为div,就有了div的属性

Vue实现Header渐隐渐现效果的实例代码

<template>
 <div class="header">
 <router-link tag="div" to="/" class="header-abs">
 <div class="iconfont header-abs-back"></div>
 </router-link>
 <div class="header-fixed">
 <div class="header">
 景点详情
 <router-link to="/">
  <div class="iconfont header-fixed-back"></div>
 </router-link>
 </div>
 </div>
 </div>
</template>

<script>
export default {
 name: 'DetailHeader'
}
</script>

<style lang="scss" scoped>
@import '~styles/varibles.scss';
.header-abs {
 position: absolute;
 left: 0.2rem;
 top: 0.2rem;
 width: 0.8rem;
 height: 0.8rem;
 line-height: 0.8rem;
 text-align: center;
 border-radius: 0.4rem;
 background: rgba(0, 0, 0, 0.8);
 .header-abs-back {
 color: #fff;
 font-size: 0.4rem;
 }
}
.header-fixed {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 height: $HeaderHeight;
 line-height: $HeaderHeight;
 text-align: center;
 color: #fff;
 background: $bgColor;
 .header-fixed-back {
 position: absolute;
 top: 0;
 left: 0;
 color: #fff;
 width: 0.64rem;
 text-align: center;
 font-size: 0.4rem;
 }
}
</style>

逻辑部分

调用activated钩子函数,因为我们用了keepalive,所以页面只要一被展示activated钩子就会执行
下面图的意思是绑定一个“scroll”事件,一旦它被执行对应的this.handleScroll方法会被执行

Vue实现Header渐隐渐现效果的实例代码

addEventListener() 方法,事件监听
你可以使用 removeEventListener() 方法来移除事件的监听。

语法:

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 “click” 或 “scroll”).

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

注意:不要使用 “on” 前缀。 例如,使用 “click” ,而不是使用 “onclick”。

渐隐渐现效果

Vue实现Header渐隐渐现效果的实例代码

这里用到了三元表达式,让opacity最大值只能是1

Vue实现Header渐隐渐现效果的实例代码

F12审查元素可看到style被添加到div上了

Vue实现Header渐隐渐现效果的实例代码

<template>
 <div class="header">
 <router-link tag="div" to="/" class="header-abs" v-show="showAbs">
 <div class="iconfont header-abs-back"></div>
 </router-link>
 <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
 <div class="header">
 景点详情
 <router-link to="/">
  <div class="iconfont header-fixed-back"></div>
 </router-link>
 </div>
 </div>
 </div>
</template>

<script>
export default {
 name: 'DetailHeader',
 data() {
 return {
 showAbs: true,
 opacityStyle: {
 opacity: 0
 }
 }
 },
 methods: {
 handleScroll() {
 console.log('scroll')
 // console.log(document.documentElement.scrollTop)
 const top = document.documentElement.scrollTop
 if (top > 60) {
 let opacity = top / 140
 // 让 opacity 最大值只能是 1
 opacity = opacity > 1 ? 1 : opacity
 this.opacityStyle = { opacity }
 this.showAbs = false
 } else {
 this.showAbs = true
 }
 }
 },
 activated() {
 window.addEventListener('scroll', this.handleScroll)
 },
 deactivated() {
 window.removeEventListener('scroll', this.handleScroll)
 }
}
</script>

<style lang="scss" scoped>
@import '~styles/varibles.scss';
.header-abs {
 position: absolute;
 left: 0.2rem;
 top: 0.2rem;
 width: 0.8rem;
 height: 0.8rem;
 line-height: 0.8rem;
 text-align: center;
 border-radius: 0.4rem;
 background: rgba(0, 0, 0, 0.8);
 .header-abs-back {
 color: #fff;
 font-size: 0.4rem;
 }
}
.header-fixed {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 height: $HeaderHeight;
 line-height: $HeaderHeight;
 text-align: center;
 color: #fff;
 background: $bgColor;
 .header-fixed-back {
 position: absolute;
 top: 0;
 left: 0;
 color: #fff;
 width: 0.64rem;
 text-align: center;
 font-size: 0.4rem;
 }
}
</style>

到此这篇关于Vue实现Header渐隐渐现效果的实例代码的文章就介绍到这了,更多相关Vue渐隐渐现效果内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
javascript的BOM汇总
Jul 16 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 #Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 #Javascript
nuxt引入组件和公共样式的操作
Nov 05 #Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 #jQuery
nuxt 实现在其它js文件中使用store的方式
Nov 05 #Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 #Javascript
vue实现点击出现操作弹出框的示例
Nov 05 #Javascript
You might like
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
初始Nodejs
2014/11/08 NodeJs
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
python动态监控日志内容的示例
2014/02/16 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
班风学风建设方案
2014/05/06 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
党员教师群众路线个人整改措施
2014/10/28 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
八一建军节主持词
2015/07/01 职场文书
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers