项目原先代码：

需要实现的是导航栏在页面下滑到一定位置的时候，对其样式进行修改
父组件system.vue页面

<template>
<div><div id="sysytem"><!-- 导航栏 --><head-tabbar  ref ="tabbar" class="tabbar"></head-tabbar><!-- 轮播图 --><el-carousel class="lunbo" :interval="3000" arrow="always"><el-carousel-itemv-for="(item, index) in bg_img":key="index"><img :src="'data:image/png;base64,'+ item" class="lunbo_img" alt="轮播图"></el-carousel-item>          </el-carousel></div>
</div>
</template>

父组件的样式system.vue页面

子绝父相原理使导航栏和背景图重叠在一起，并让导航栏悬浮在图片上

    #sysytem {position: relative;width: 100%;height: 600px;      }.tabbar {position: absolute;height: 80px;width: 94%;left: 3%;z-index: 999;}.lunbo {position: absolute;height: 600px;z-index: 1;}

预想实现和代码：

现在想实现海致星图官网的导航栏效果

监听页面滚动
在methods中定义一个方法

 methods: {handleScroll() {var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;var tabbar = document.querySelector('.tabbar');console.log("tabbar节点", tabbar);if (scrollTop >= 600) {//滚动大于600（超过图片）的时候要做的操作//定位改为固定定位，始终位于窗口视图的顶端，并且改颜色为白色和设置边框阴影tabbar.style.position = "fixed";tabbar.style.boxShadow = " 0 2px 4px 0 rgb(21 134 223 / 10%)";tabbar.style.backgroundColor = "rgba(255, 255, 255, 0.8)"; } else if (scrollTop > 0) {//滚动大于0小于600（在图片内部）的时候要做的操作//定位改为固定定位，始终位于窗口视图的顶端，并且改颜色为黑色设置透明度tabbar.style.position = "fixed";tabbar.style.backgroundColor = "rgba(0, 0, 0, 0.4)";} else {//等于0（导航栏在顶部）的时候要做的操作//改为初始的绝对定位，并且颜色改为透明，边框阴影去掉tabbar.style.position = "absolute";tabbar.style.backgroundColor = "transparent";tabbar.style.boxShadow = "";}}}

bug和原因分析：

发现修改不成功，导航栏的背景颜色不准确。
这时候调试，打印 console.log(“tabbar节点”, tabbar);

然后看看子组件 headTabbar.vue

问题出本来应该给.el-menu 修改背景颜色，但是我是去对它的父亲元素进行背景颜色的修改
这一层
等同于这一层

解决方案：

其实我们是需要修改的是其子元素节点，利用firstChild或者firstElementChild（指向第一个Element类型的子元素）

在vue页面监听中如何修改子元素的样式相关推荐

vue watch监听中 immediate, deep, hander的作用
1. immediate immediate的值默认是false,在第一次进入页面页面时,如果没有发生数据变化watch并不会立即监听只有发生数据改变,hander才会有操作,但是如果将immedia ...
监听关闭页面事件 ajax,Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
网上很多博客说监听窗口关闭事件使用window.beforeunload,但是这个监听事件也会在页面刷新的时候执行,经过百度和自己的实际测试, 终于解决了这个问题,代码如下: mounted() { ...
woo如何监听目录和文件变动,woo目录中的文件被改变，监听文件被修改权限
记录下woo语言监听文件和和文件夹变动后触发事件非常完整的例子了. 注意由于文件监听属于工具类,则需要使用wop而不是woo print('file notify')-- 初始化监听实列 local ...
vue动态监听窗口高度 - 全背景banner
vue动态监听窗口高度 - 全背景banner 参考项目文件 src/hr/index.vue [结合下文:第一种方法] 第一种方法:[本文手写代码] data() {return {screenHe ...
vue监听滚动事件实现某元素吸顶或者固定位置显示
vue监听滚动事件实现某元素吸顶或者固定位置显示最近写了一个VUE的web app项目,需要实现某个部位吸顶的效果.即,页面往上滑动,刚好到达该部位时,该部分,固定在顶部显示. 1.监听滚动事件 ...
vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
Vue.js 监听属性简单实例
Vue.js 监听属性 watch,可以通过 watch 来响应数据的变化. watch:用来监听每一个属性的变化 watch这个对象里面都是函数,函数的名称是data中的属性名称,watch ...
监听localStorage变化（同页面监听）
"当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件,就会触发" 同页面监听,重写localStorage的方法,抛出自定义事件: &l ...
【js监听报错】页面监听js报错问题
<html> <head> <script type="text/javascript">// 页面监听js报错问题 οnerrοr=handl ...

在vue页面监听中如何修改子元素的样式

项目原先代码：

预想实现和代码：

bug和原因分析：

解决方案：

在vue页面监听中如何修改子元素的样式相关推荐

最新文章

热门文章