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之可拖动的iframe效果代码
Aug 01 Javascript
基于jquery的气泡提示效果
May 31 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
requirejs + vue 项目搭建详解
Jun 16 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 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
PHP中session跨子域的三种实现方法
2016/07/25 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
json跟xml的对比分析
2008/06/10 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
python语言使用技巧分享
2016/05/31 Python
Python中list初始化方法示例
2016/09/18 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
python递归全排列实现方法
2018/08/18 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
python Xpath语法的使用
2020/11/26 Python
python wsgiref源码解析
2021/02/06 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
西部世纪.net笔试题面试题
2014/04/03 面试题
网游商务专员求职信
2013/10/15 职场文书
护士自荐信
2013/10/25 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
高三语文复习计划
2015/01/19 职场文书
专职安全员岗位职责
2015/04/11 职场文书