滚动时回显白色导航，以及vue 解决window.addEventListener失效问题

最新推荐文章于 2024-08-02 17:24:12 发布
最新推荐文章于 2024-08-02 17:24:12 发布
阅读量2.1k 收藏 1
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55648290/article/details/121083140
版权
本文介绍了在Vue.js应用中如何处理window.addEventListener失效的问题，提供了一个解决方案。同时，文章还详细讲解了如何实现滚动时导航栏的回显效果，利用 vant 组件库的吸顶功能来打造白色背景的导航条，并通过控制方法来管理导航的显示与隐藏状态。
摘要由CSDN通过智能技术生成

1.在最大的盒子加ref="  "

2.在生命周期函数mouted()中写

以上可解决在vue中window.addEventListener失效问题。

以下是回显白色导航

1.两个状态，一是默认的返回按钮，二是回显的白色背景导航。白色导航使用的是vant组件库里面的吸顶。

 2.在方法里面决定二者的显示与隐藏 

 

 

尤小白
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
window监听scroll事件失效，window.addEventListener(‘scroll‘,callback)
qq_41442929的博客
12-08 6360
window监听scroll事件实效 今天在写一个页面的时候需要监听页面的滚动 代码书写格式如下 window.addEventListener('scroll',callback) 发现不管怎么弄callback 函数都无法执行 后来问了部门的大佬才解决，现做一个记录 解决办法如下 { height:100%; overflow:hidden; } 将上面的css样式放于需要监听的页面的顶层父元素身上，然后在获取该父元素的dom，监听其滚动即可 假如有如下dom页面 <div class
vue自学,window.addEventListener不生效解决方案
yrldjsbk的博客
02-25 7259
自己的代码里写的时候，多了一个小括号，导致代码不生效。百度反复查询了各种解决方案，最终，在对比网友的解决方案时候，注意到了这个细节，发现网友的方法调用，也是不带小括号的。我去掉括号后，代码生效了。最近在网上跟着别人的教程视频自学vue，在给window对象添加监听事件后，发现起初，一直没有效果。找不到原因，比较困惑。如图，出现了 这个脚本的图标，点击，就会回到页面的顶部，大于400像素后会出现，小于400像素是不会出现的。如图，这是自定义一个判定，要不要显示该图标的代码。如图，这是老师视频里面的截图代码。
vue中window.addEventListener(‘scroll‘, xx)失效
最新发布
_NIXIAKF的博客
08-02 173
vue中window.addEventListener(‘scroll‘, xx)失效
vue中window.addEventListener(‘scroll‘, xx)失效解决办法
1
12-14 7402
多次尝试都无法获取到滚动事件,后来加上true之后就可以了 window.addEventListener('scroll', this.clintHeight, true)
electron中addEventListener不生效
hlzdcmjxs的博客
03-22 456
在需要添加addEventListener的地方设置为-webkit-app-region: no-drag;检查一下是否设置了-webkit-app-region: drag;
解决vue在某元素全屏时，点击 ESC 按键，监听不到addEventListener(‘keydown‘事件
m0_48308579的博客
05-10 1754
在某个元素全屏时，点击 ESC 按键无法被正常捕获的原因是与焦点有关。添加fullscreenchange事件监听器，就可以获取到当前状态。
Vue项目中data数据无法被window.addEventListener中获取
silver577的博客
07-17 2423
Vue项目中data数据无法被window.addEventListener中获取
Vue下拉框回显并默认选中随机问题
12-09
总之，解决Vue下拉框回显随机问题的关键在于保证数据加载的顺序，确保数据一致性，并充分利用Vue和Element UI提供的特性。通过调整请求顺序，保证数据的同步，以及正确设置和绑定数据，可以有效地避免此类问题的发生...
【vue+leaflet】vue使用leaflet.pm保存绘制后的图层的点位信息、图层回显、平面图切换、地图事件函数、图层事件
02-22
【vue+leaflet】vue使用leaflet.pm保存绘制后的图层的点位信息、图层回显、平面图切换、地图事件函数、图层事件函数说明(二)cv可用 【vue+leaflet】vue使用leaflet.pm保存绘制后的图层的点位信息、图层回显、平面图...
vue页面回显数据_解决vue表单回显数据无法修改的问题
weixin_42556143的博客
12-23 2811
前言：今天在做修改操作的时候遇到了一个问题，数据回显到修改表单之后，发现无法输入，也不能实现修改项目环境：springboot+vue前后端分离问题：修改操作数据回显无法输入值一、问题截图二、代码展示编辑按钮@click="updateWindow = true,editCustomer(scope.$index,scope.row,tableData)">编辑点击编辑按钮后，实现数据回显方...
addEventlistener不生效，已经执行了注册，但是事件没有注册成功
热门推荐
08-24 1万+
浏览器强刷的时候，有时候明明代码已经执行了addEventlistener，但是在chrome上的event listener就是没有看到注册的，自然也不会响应事件   重点，有时候可以有时候不可以。 后来发现是vue的原因，由于使用了vue的单文件组件，template里面的模板替换掉了html上的vue的el节点。 所以实际上是有时候注册了事件，但是又被vue的模板重新替换掉了注册...
vue监听scroll事件无效？（踩坑记录）
Dark_programmer的博客
01-11 3383
前端使用技术为VUE 踩坑记录 最近在项目里，因为需要监听滚动事件，就直接写监听代码如下： 尝试一、 html: <div id="scroll-div" @scroll="scrollHandle"> 监听我的滚动 <div> js: scrollHandle() { console.log("scrolll"); }, 但是事件并没有执行。于是想通过addEventListener原生的方式进行监听。将代码写入mounted 尝试二、 html: moun
vue3 elementplus使用container布局容器 scroll 失效问题
weixin_44536001的博客
06-05 738
当项目中的layout页面使用了container布局后 此时在展示页面中添加window.addEventListener("scroll")事件和document.body.scrollTop 相关都会失效，原因是因为具体的滚动是在el-mian元素上执行的我们需要在这个元素添加相关的监听操作。
解决Vue中ecahrts组件不能自适应问题
小绵杨
08-15 1418
vue2项目中使用了echarts图标库来进行数据展示，需要解决图表自适应窗口变化以及菜单收缩后容器变化。
vue中addEventListener监听不到，原来是最外层没有设置长宽
weixin_43444977的博客
11-03 1132
在vue项目中，使用 原生的监听 addEventListener。最后发现，原来是CSS的问题。最外层的 APP.vue文件,
window.addEventListener在部分安卓手机不生效
weixin_56006480的博客
05-26 2300
事件的默认行为，导致无法正确触发滚动事件。可以尝试在事件处理函数中调用。可能会存在一些问题，主要是因为安卓手机浏览器的兼容性问题。安卓手机上的一些浏览器可能会阻止。，这个选项用来指定是否允许调用。方法传递了一个选项对象。在上面的代码中，我们给。
devicemotion 或者 deviceorientation在window.addEventListener 事件中不生效，没有输出内容
右边疯子_的博客
05-29 507
问题：devicemotion 或者 deviceorientation 在window.addEventListener 事件中不生效，没有输出内容。2、必须用户手动点击click事件中调用。1、必须在Https协议下才可使用。
js滚动条事件监听addEventListener、removeEventListener不生效
weixin_36931308的博客
07-12 1265
参考：你所不知道的scroll事件：为什么scroll事件会失效？ | Ayase-252's wonderlandEventTarget.removeEventListener - Web API 接口参考 | MDN
vue upload 编辑时回显
07-15
总结起来，实现vue upload编辑回显的关键是使用一个变量来存储已上传的文件信息，并在编辑页面中将它绑定到对应的上传输入框上，以及在进入编辑页面时将已保存的文件信息传递给变量，实现文件的回显效果。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值